从Angular 8中的同一组件打开新模式时如何关闭现有的ngx-modal

Question

我正在尝试制作一个可以从同一个模态本身调用的可重用模态组件。

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

下面是我的堆栈闪电战。

https://stackblitz.com/edit/angular-nested-component-modal-ngx-bootstrap-n

Answer 1

我会使用一种模式...

这里是策略

1. 在应用组件上有模态
2. 创建一个在用户想要打开新模式时进行通信的服务
3. 从每个组件按钮调用服务

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

my.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject, Subject } from "rxjs";

interface IModalParams {
  component: any;
  config?: any;
  title?: any;
}
@Injectable()
export class MyService {
  modalOpen$ = new BehaviorSubject(false);
  component;
  config;
  title;
  show({ component, config, title }: IModalParams) {
    this.component = component;
    this.config = config;
    this.title = title;
    this.modalOpen$.next(true);
  }
}

所以我们定义了一个 show 方法来设置一些变量（component、configuration 和 title）

我们还定义了一个主题modalOpen$。现在，当用户打开新模式时，任何订阅它的属性都会收到通知

app.component.ts

  ngOnInit() {
    this.myService.modalOpen$.pipe(
      tap(() => this.modalRef?.hide()),
      filter(isOpen => isOpen)
    ).subscribe({
      next: () => {
        const {component, config, title} = this.myService
          this.modalRef = this.modalService.show(component, config);
          if(title) {
            this.modalRef.content.title = title; 
          }
      }
    })
  }

这里我们订阅modalOpen$并打开或关闭提供的组件

any-other.component.ts

 this.myService.show({
     component: ModalContentComponent,
     config: {
      ignoreBackdropClick: false
    },
    title: "Modal with component"
   })
  }

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

See Demo Here