Можно ли открыть модал в угловой 6 без использования только начальной загрузки материала?

Question

Я оставил компонент бара.Внутри этого компонента у меня есть кнопка для открытия модальной.Как я могу открыть модальное с этой кнопки, но не открывать его внутри этого компонента?

Answer 1

Вы можете добавить свой код modal внутри своих родителей .component.html, чтобы он был доступен на всей странице.

Для ng-bootstrap (например) это должно бытьвыглядит следующим образом:

<ng-template #myModal>
    <div class="modal-header">
        ...
</ng-template>

В компоненте вашего ребенка (компонент левой панели) вы теперь можете добавить выходные данные, которые открываются в этом режиме:

@Output() openmodal: EventEmitter<boolean> = new EventEmitter();

Нажатием вашей кнопки

<button (click)="openMyOpen()">Open Modal</button>

вы можете активировать выход

openMyOpen(): void {
    this.openmodal.emit(true);
}

В компоненте вашего родителя вы можете получить этот выход, если настроено

<left-bar (openmodal)="open($event, )"></left-bar>

И открыть ваш модальный в этом компоненте

@ViewChild('myModal') myModal: NgbModal;

open(): void {
   this.modalService.open(this.myModal);
}

Обратите внимание, что в этом решении используется ng-bootstrap , но его можно настроить любым модалом, который вы хотите использовать.