如何使用持久组件创建 ng-bootstrap 模式

Question

我正在尝试按照本教程(https://ng-bootstrap.github.io/#/components/modal - "组件作为内容"部分(实现具有角度的模态，但我希望模态中显示的组件在下次打开时保持其状态。

我创建了一个简单的 Plunker 示例：http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

我想要实现的是，在调用 openA(( 之后调用 open(( 将显示文本"Hello， A！"，但它不会保持状态。

openA() {
  const modalRef = this.modalService.open(NgbdModalContent);
  modalRef.componentInstance.name = 'A';
}
openB() {
  const modalRef = this.modalService.open(NgbdModalContent);
  modalRef.componentInstance.name = 'B';
}
open() {
  const modalRef = this.modalService.open(NgbdModalContent);
}

¿

如何创建此最小设置？ ¿或者您建议使用哪种角度文档来了解正在发生的事情？

Answer 1

每次以组件作为内容打开新模态时，该组件将被重新创建(并在模态关闭时销毁(。从这个意义上说，您不能"持久化"组件实例。

相反，您应该做的是保留驱动组件显示和行为的模型(数据(。

Answer 2

使用窗口类选项打开父模型

const parentModalRef = this.modalService.open(ParentModal, {
  centered: true,
  windowClass: 'refererToParent',
});

这会将一个类"refererToParent"添加到您的父模式窗口。在打开子模态之前，请从父模态窗口中删除类"show"。打开你的孩子莫代尔没有背景

parent = document.getElementsByClassName('refererToParent').item(0)!;
parent.classList.remove('show')
const childModalRef = this.modalService.open(ChildModal, {
  backdrop: false
});

在 childModalRef 上设置一个侦听器，一旦您的 ChildModel 关闭，它将附加类"show"。

childModalRef.closed.subscribe(() => parent.classList.add('show'))