Я использовал # что-то в <ng-template #something></>
а затем мне нужно вызвать другие функции, используя #somethingOther из файла TS, в основном использованное #somethingOther для <zxing-scanner></>
когда я использовал [ngTemplateOutlet] вне <ng-template></>, он давал мне ту же модель в двух местах. во всплывающем окне, а также на странице под моими данными.
Никто не может мне помочь с этой проблемой. образец кода
<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>
Я НЕ УВЕРЕН, КАК ЭТО ИСПОЛЬЗОВАТЬ ....
Просто создайте вилку с этого URL-адреса stackblitz.com/edit/angular-5-example, и все готово.
Я прикрепил скриншот там. Не уверен, разрешат ли поставить код. код, с которым у меня возникла ошибка, указан выше, не обязательно помещать полный код. Я хочу, чтобы указанная ниже вещь была только при нажатии кнопки, но она отображается как на кнопке, так и под данными





У меня есть решение этой проблемы. все, что я сделал, это поместил скрытый 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>
Мне нравится ваш код. Было бы лучше, если бы вы могли создать демонстрацию stackblitz.