Question

我在<ng-template #something></>中使用了#something 然后我必须使用TSsome文件中的#somethingOther来调用其他功能，该文件基本上用于<zxing-scanner></>

当我在[ngTemplateOutlet]以外使用<ng-template></>时，会在2个地方给我相同的模型。在弹出的页面以及我的数据下面。

没人能帮我解决这个问题。示例代码

<ng-container [ngTemplateOutlet]="modalContent"></ng-container>
<ng-template #modalContent>
    <div class="modal-body bg-gray">
        <div class="row">

        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="row px-3">

            <div class="tab-content col-9 border-0">

                <div class="scanner-shell" [hidden]="!hasDevices">
                    <zxing-scanner #scanning start="true" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
                </div>

                <div class="form-group">
                    <label class="text-gray">device Code</label>
                    <input type="text" value='{{ qrResultString }}'>
                </div>
                <div class="form-group">
                    <label class="text-gray">device Name</label>
                    <input type="text">

                </div>

                <div class="form-group">
                    <label class="text-gray">Device Type</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <label class="custom-control-label" for="checkboxActive">Active</label>
                </div>
            </div>
    </div>
    <div class="col-12 bg-white text-center py-1">
        <button [disabled]="!form.valid" class="btn btn-success mr-1" type="submit">
            <span *ngIf="!device">Update</span>
            <span *ngIf="device">Add</span>
        </button>
        <button type="button" class="btn btn-danger" 
   (click)="closeModal()">Cancel</button>
    </div>
    </form>
</div>
</div>
  </ng-template>

Answer 1

我已经解决了这个问题。我所要做的就是将一个隐藏的div放在ng-template之外，该模板将Ts文件的所有必需属性提供给模板中的扫描ID。然后在我想使用的地方使用它。

使用templateoutletModal将其放在两个位置。

<div class='d-none'>
<div class="scanner-shell" [hidden]="!hasDevices">
    <zxing-scanner #scanning start="true" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
</div>
</div>
<ng-template #modalContent>
    <div class="modal-body bg-gray">
        <div class="row">

        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="row px-3">

            <div class="tab-content col-9 border-0">

                <div class="scanner-shell" [hidden]="!hasDevices">
                    <zxing-scanner #scanning start="true" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
                </div>

                <div class="form-group">
                    <label class="text-gray">device Code</label>
                    <input type="text" value='{{ qrResultString }}'>
                </div>
                <div class="form-group">
                    <label class="text-gray">device Name</label>
                    <input type="text">

                </div>

                <div class="form-group">
                    <label class="text-gray">Device Type</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <label class="custom-control-label" for="checkboxActive">Active</label>
                </div>
            </div>
    </div>
    <div class="col-12 bg-white text-center py-1">
        <button [disabled]="!form.valid" class="btn btn-success mr-1" type="submit">
            <span *ngIf="!device">Update</span>
            <span *ngIf="device">Add</span>
        </button>
        <button type="button" class="btn btn-danger" (click)="closeModal()">Cancel</button>
    </div>
    </form>
</div>

ng-template和ngTemplateOutlet Angular

1 个答案: