当在Angular 8中从相同组件打开新模式时，如何关闭现有ngx模式

我试图制作一个可重用的模态组件，它可以从同一模态本身调用

如何配置组件和模式，以便当可重用组件打开时，旧实例将直接关闭

下面是我的闪电战

---

我会使用一种模式

这就是策略

在应用程序组件上设置模式

创建一个服务，该服务将在用户希望打开新模式时进行通信

从每个组件按钮调用服务

让我们从定义我们的服务开始

我的服务

从“@angular/core”导入{Injectable}；
从“rxjs”导入{BehaviorSubject，Subject}；
接口参数{
组成部分：任何；
配置？：任何；
标题？：任何；
}
@可注射（）
导出类MyService{
modalOpen$=新行为主体（false）；
组成部分；
配置；
标题
显示（{component，config，title}:IModalParams）{
这个组件=组件；
this.config=config；
this.title=标题；
this.modalOpen$.next（true）；
}
}

因此，我们定义了一个show方法，该方法将设置一些变量（

组件

，

配置

和

标题

）

我们还定义了一个主题

modalOpen$

。现在，当用户打开一个新模式时，将通知订阅此模式的任何属性

app.component.ts

ngOnInit（）{
这个.myService.modalOpen$.pipe(
轻触（（）=>this.modalRef？.hide（）），
过滤器（等参线=>等参线）
).订阅({
下一个：（）=>{
const{component，config，title}=this.myService
this.modalRef=this.modalService.show（组件，配置）；
如果（标题）{
this.modalRef.content.title=标题；
}
}
})
}

在这里，我们订阅

modalOpen$

，并打开或关闭提供的组件

任意-other.component.ts

this.myService.show({
组件：ModalContentComponent，
配置：{
ignoreBackdropClick:false
},
标题：“带组件的模态”
})
}

在其他组件中，我们现在可以使用上面指定的

show

方法

---

但将订阅保留在应用程序内组件上是否是一种良好的做法？只要您确保取消订阅，我相信这很好。另一种选择是简单地将模态移动到它自己的组件。这样你就不用担心在app.componentCool中订阅了。您是否可以将modal的示例作为自己的组件。。。？请看这个叉子谢谢…只有一个建议。。你知道有哪个库像Angular 8中的材质一样支持此功能吗