Вызываемая угловая начальная загрузка модальна любым компонентом внутри модуля в Angular 6

Question

Я пытаюсь реализовать глобальный модал, используя ng-bootstrap в моем проекте Angular 6.

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

Как этого добиться?Нужно ли реализовать для этого конкретный сервис?Нужно ли добавлять entryComponents к определенному модулю?Всегда ли мне нужен метод open(), как в данном примере, в каждом компоненте, где я хочу использовать мой модал?

Простой пример или подсказка были бы очень полезны:)

modal.template.html:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Some Content
  </div>
</ng-template>

Answer 1

Есть еще один вариант.Альдо, это так ужасно, что я совершенно не рекомендую это.Я просто сделал это, потому что мне было любопытно.Если у вас есть компонент, который всегда виден в вашем приложении.Или, по крайней мере, всегда, когда вам нужно отобразить модальное окно, вы можете поместить определение шаблона в этот компонент:

always.vible.component.ts:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
  </div>
</ng-template>

Затем в хуке AfterContentInit вы можете инициализировать службу.

  ngAfterContentInit(): void {
    this.modalService.setModal(this.tempalte);
  }

Служба выглядит следующим образом:

import { Injectable, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  private content:any;

  constructor(private modalService: NgbModal) { }

  setModal(content:any){
    console.log(content);
    this.content = content;
  }

  public showWindow():void{
    this.modalService.open(this.content, { centered: true });
  }
}

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

Answer 2

создайте компонент и добавьте его в entryComponents, затем создайте сервис с root'ом

<!-- language: lang-js -->

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { myComponent } from './component';

@Injectable({ providedIn: 'root' })
export class CommonService {
  constructor(
    private modalService: NgbModal
  ) {}

  private myModal() {
    const modalRef = this.modalService.open(myComponent, {
      windowClass: 'in'
    });
    return modalRef.result;
  }

}

Затем просто внедрите сервис в компонент и вызовите функцию myModal, тогда модал будет открыт