typescript 如何用持久化组件创建ng-bootstrap模型？

ltskdhd1 于 2023-04-22 发布在 TypeScript

关注(0)|答案(2)|浏览(126)

我试图按照本教程（https：ng-bootstrap.github.io/#/components/modal- section“组件作为内容”）实现一个带有angular的模态，但我希望模态中显示的组件在关闭后保持其状态，以便下次打开时使用。
我创建了一个简单的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);
}

¿如何创建这个最小设置？¿或者您推荐哪个Angular 文档来了解正在发生的事情？

typescript

来源：https://stackoverflow.com/questions/44007477/how-to-create-ng-bootstrap-modal-with-persistent-component

2条答案

按热度按时间

jchrr9hc1#

每当一个新的modal以一个组件作为内容被打开时，该组件将被重新创建（并在modal关闭时被销毁）。
相反，你应该做的是保留驱动组件显示和行为的 * 模型 *（数据）。

赞(0）回复(0）举报 2023-04-22

0aydgbwb2#

使用windowClass选项打开父模型

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

这将添加一个类“refererToParent”到你的父模式窗口。在打开你的ChildModal之前，从你的父模式窗口中删除类“show”。然后打开你的ChildModal不带背景

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'))

赞(0）回复(0）举报 2023-04-22

我来回答

typescript 如何用持久化组件创建ng-bootstrap模型？

2条答案

相关问题

热门标签

最新问答