Angular嵌套ngx-bootstrap模态框：关闭子模态框后父模态框失效求助

这个问题我之前处理过不少，核心原因是父子模态框的BsModalRef实例被混淆覆盖了。当你打开子模态框时，如果没有单独存储子模态框的实例引用，子模态框的BsModalRef会覆盖父组件中原本指向父模态框的bsModalRef变量。等你关闭子模态框后，父组件的bsModalRef已经指向了被销毁的子模态框实例，此时调用this.bsModalRef.hide()自然不会对父模态框产生任何作用。

要解决这个问题，关键是给父、子模态框分别维护独立的BsModalRef实例引用：

1. 父组件中分别存储父、子模态框的实例 #

在父组件的.ts文件中，定义两个独立变量来区分不同模态框的引用：

import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

export class ParentComponent {
  // 专门存储父模态框的实例
  private parentModalRef: BsModalRef;
  // 专门存储子模态框的实例
  private childModalRef: BsModalRef;

  constructor(private modalService: BsModalService) {}

  // 打开父模态框的方法
  openParentModal() {
    this.parentModalRef = this.modalService.show(ParentModalComponent);
  }

  // 在父模态框内部打开子模态框的方法
  openChildModal() {
    this.childModalRef = this.modalService.show(ChildModalComponent);
  }

  // 父模态框的关闭方法
  closeParentModal() {
    if (this.parentModalRef) {
      this.parentModalRef.hide();
      this.parentModalRef = null; // 关闭后清理引用，避免内存泄漏
    }
  }

  // 子模态框的关闭方法（也可以在子组件内部实现）
  closeChildModal() {
    if (this.childModalRef) {
      this.childModalRef.hide();
      this.childModalRef = null;
    }
  }
}

2. 子组件独立处理自身关闭逻辑 #

子组件不要复用父组件的模态框引用，直接使用modalService注入的自身实例即可：

// 子组件.ts文件
import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-child-modal',
  templateUrl: './child-modal.component.html'
})
export class ChildModalComponent {
  constructor(public bsModalRef: BsModalRef) {}

  closeChildModal() {
    this.bsModalRef.hide();
  }
}

这里子组件的bsModalRef是独立实例，完全不会和父模态框的引用冲突。

3. 模板按钮绑定对应方法 #

父模态框的关闭按钮绑定父模态框的专属关闭方法：

<button class="btn btn-oval btn-sm ml-2" (click)="closeParentModal()" type="button"> Close </button>

子模态框的关闭按钮绑定自身的关闭方法：

<button class="btn btn-oval btn-sm ml-2" (click)="closeChildModal()" type="button"> Close </button>

额外注意点 #

• 每次关闭模态框后记得将对应实例置为null，避免不必要的内存占用。
• 如果是在父模态框组件内部打开子模态框，一定要确保子模态框的实例是单独存储的，绝对不要复用父模态框的引用变量。

内容的提问来源于stack exchange，提问作者Julio Rodríguez