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

Question

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

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

下面是我的 stackblitz。

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

Answer 1

我会使用一种模式...

这是攻略

在应用程序组件上有模式
创建一个服务，当用户想要打开一个新模式时，它会进行通信
从每个组件按钮调用服务

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

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);
  }
}

所以我们定义了一个显示方法，它将设置一些变量（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$并打开或关闭提供的组件

任意-other.component.ts

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

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

See Demo Here

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

How to close the existing ngx-modal when new modal open up from same component in Angular 8

typescript

ngx-modal

ngx-bootstrap

angular

my.service.ts

app.component.ts

任意-other.component.ts