ng-template и ngTemplateOutlet Angular

Question

Я использовал #something в <ng-template #something></>, а затем мне нужно вызвать другой функционал, используя #somethingOther, из файла TS в основном использовался #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 для идентификатора сканирования внутри шаблона.а затем использовал его внутри, где я хотел использовать.

с помощью 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>