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

Question

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

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

下面是我的 stackblitz。

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

Answer 1

我会使用一个模式...

这是策略

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

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

我的服务.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$。现在，当用户打开新模式时，任何订阅此属性的属性都会收到通知

应用程序组件.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$，并打开或关闭提供的组件

任何其他.component.ts

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

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

See Demo Here