NG- bootstrap: открывать несколько модалов в отдельных компонентах из одного клика - PullRequest
Новая
       23

NG- bootstrap: открывать несколько модалов в отдельных компонентах из одного клика

0 голосов
/ 16 января 2020

У меня изначально был модал ng- bootstrap (5.1.4) и кнопка, открывающая его в шаблоне моей страницы, например: 

    <ng-template #basicMessage
                 let-modal>
      <div class="modal-header">
        <h2 id="modal-basic-title"
            class="modal-title">Modal headline</h2>
        <button type="button"
                class="close"
                aria-label="Close"
                (click)="modal.dismiss('Close icon clicked')">
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.</p>
      </div>
    </ng-template>

    <button class="btn btn-primary mb-3"
            (click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
            matRipple>
      View Demo
    </button>

На этой странице есть несколько таких модальных демонстраций каждый из которых имеет свой собственный шаблонный тег, такой как #singleChoiceActionModal и #basicMessage.

. Теперь я бы хотел переместить каждый модал в свой компонент и вызвать его из кнопки viewdemo, передавая имя какую демонстрацию открыть. Проблема в том, что, как только я переместил вышеупомянутый модальный шаблон ng в его собственный компонент: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-ngmodal-basic',
  template: `
    <ng-template #basicMessage let-modal>
      <div class="modal-header">
        <h2 id="modal-basic-title" class="modal-title">Modal headline</h2>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Close icon clicked')">
          <span aria-hidden="true"></span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, duo ei volumus perfecto ocurreret, nam et volutpat explicari hendrerit.
        </p>
      </div>
    </ng-template>
  `,
  styles: []
})
export class NgmodalBasicComponent {}

, а затем добавил этот компонент на мою демонстрационную страницу, как в 

    <app-ngmodal-basic></app-ngmodal-basic>

    <button class="btn btn-primary mb-3"
            (click)="open(basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
            matRipple>
      View Demo
    </button>

, всплывает фон но без модальности.

Поскольку это немного сбивает с толку, я сделал Stackblitz: https://stackblitz.com/edit/angular-rvsxpz

1 Ответ

1 голос
/ 16 января 2020

Вы должны передать ссылку на шаблон первому аргументу метода open. Но в вашем примере вы передаете undefined, поэтому он не работает. Сначала вы должны получить ссылку на шаблон app-ngmodal-basi c, а затем передать этот ref методу open. Чтобы получить ссылку на шаблон app-ngmodal-basi c, используйте ViewChild, затем добавьте переменную шаблона в app-ngmodal-basi c, чтобы получить доступ

Попробуйте это

ng-model-basi c .component.ts 

export class NgmodalBasicComponent {
  @ViewChild("basicMessage", { static: false })
  public basicMessage: TemplateRef<any>;
  constructor() {}
}

hello.component. html

<app-ngmodal-basic #modal></app-ngmodal-basic>

   <button class="btn btn-primary my-5 d-block"
                (click)="open(modal.basicMessage, { ariaLabelledBy: 'modal-basic-title' })"
                matRipple>
         Open Basic Message Modal
    </button>

Пример Forked

...