是否可以在角度6中打开模态而不使用仅材料的自举？

Posted 2021-04-06

我离开了酒吧组件。在该组件内部，我有打开模态的按钮。如何从该按钮打开模态但不在该组件内打开？

答案

您可以在父母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，但可以使用您想要使用的任何模态进行调整。