Ng-template и ngTemplateOutlet Angular

Я использовал # что-то в <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>

Ng-template и ngTemplateOutlet Angular

Мне нравится ваш код. Было бы лучше, если бы вы могли создать демонстрацию stackblitz.

Sunil Singh 07.12.2018 09:37

Я НЕ УВЕРЕН, КАК ЭТО ИСПОЛЬЗОВАТЬ ....

Aayushi Gupta 07.12.2018 10:24

Просто создайте вилку с этого URL-адреса stackblitz.com/edit/angular-5-example, и все готово.

Sunil Singh 07.12.2018 10:28

Я прикрепил скриншот там. Не уверен, разрешат ли поставить код. код, с которым у меня возникла ошибка, указан выше, не обязательно помещать полный код. Я хочу, чтобы указанная ниже вещь была только при нажатии кнопки, но она отображается как на кнопке, так и под данными

Aayushi Gupta 07.12.2018 10:33
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
4
164
1

Ответы 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>

Другие вопросы по теме