如何在跳转到另一Angular模态框后关闭原模态框？

核心问题在于DEFContentComponent里的activeModal是它自身模态框的实例，和原ABCContentComponent的模态框实例完全独立，所以直接调用this.activeModal.close()只能关闭DEF自己的模态框，无法影响原模态框。要实现需求，需要把原模态框的引用传递给DEF组件，具体方案如下：

方案一：直接传递原模态框实例 #

1. 在ABC组件中打开DEF时传递引用 #

假设你是在ABCContentComponent里打开DEFContentComponent，修改打开DEF的代码，把ABC自身的activeModal传给DEF：

// ABCContentComponent内的代码
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { DEFContentComponent } from '../def-content/def-content.component';

@Component({/* 组件元数据 */})
export class ABCContentComponent {
  constructor(public activeModal: NgbActiveModal, private modalService: NgbModal) {}

  openDEFModal() {
    const defModalRef = this.modalService.open(DEFContentComponent);
    // 将ABC的模态框实例传递给DEF组件
    defModalRef.componentInstance.parentModal = this.activeModal;
  }
}

2. 在DEF组件中接收并关闭原模态框 #

修改DEFContentComponent，添加接收父模态框的属性，然后调用它的close方法：

import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-def-content',
  templateUrl: './def-content.component.html',
  styles: []
})
export class DEFContentComponent implements OnInit {
  // 接收原ABC模态框的实例
  @Input() parentModal: NgbActiveModal;

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    setTimeout(() => {
      // 先关闭自身模态框，再关闭原模态框
      this.activeModal.close("Success");
      this.parentModal.close("原模态框已关闭");
    });
  }
}

方案二：用共享服务管理模态框引用 #

如果组件层级复杂，直接传递实例不方便，可以创建一个全局服务来共享模态框引用：

1. 创建模态框管理服务 #

// modal-manager.service.ts
import { Injectable } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Injectable({ providedIn: 'root' })
export class ModalManagerService {
  private parentModalInstance: NgbActiveModal | null = null;

  // 保存原模态框实例
  saveParentModal(modal: NgbActiveModal) {
    this.parentModalInstance = modal;
  }

  // 关闭原模态框
  closeParentModal(result?: any) {
    if (this.parentModalInstance) {
      this.parentModalInstance.close(result);
      this.parentModalInstance = null;
    }
  }
}

2. 在ABC组件中保存原模态框引用 #

// ABCContentComponent内的代码
constructor(public activeModal: NgbActiveModal, private modalManager: ModalManagerService) {}

openDEFModal() {
  // 把ABC的模态框实例存入服务
  this.modalManager.saveParentModal(this.activeModal);
  this.modalService.open(DEFContentComponent);
}

3. 在DEF组件中调用服务关闭原模态框 #

// DEFContentComponent内的代码
constructor(public activeModal: NgbActiveModal, private modalManager: ModalManagerService) {}

ngAfterViewInit() {
  setTimeout(() => {
    this.activeModal.close("Success");
    // 通过服务关闭原模态框
    this.modalManager.closeParentModal("原模态框已关闭");
  });
}

注意事项 #

• 传递的必须是原模态框的NgbActiveModal实例，而不是modalRef（modalRef是模态框的外层引用，其componentInstance.activeModal才是对应组件的NgbActiveModal实例）。
• 如果不需要保留DEF模态框，也可以考虑打开DEF时直接关闭原ABC模态框，但这不符合你“在DEF中关闭原模态框”的需求。

内容的提问来源于stack exchange，提问作者wiki