ng模板和ngTemplateOutlet Angular

Question

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

当我在<ng-template></>之外使用[ngTemplateOutlet]时，它在两个地方给出了相同的模型。在页面的弹出窗口中，我的数据也在下面。

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

<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>

​