Angular 16中ngx-bootstrap Modal的onHide回调不执行问题排查

问题1：onHide订阅的语法错误 #

你在openRolesModal里订阅onHide的写法存在语法错误，当前代码把next回调嵌套在了箭头函数内部，不符合RxJS的订阅规范，导致回调无法触发。

错误代码：

this.bsModalRef.onHide?.subscribe(() => {
  next: () => {
    console.log('allan');
    }
  })

修复方式（二选一）：

• 直接传递回调函数（适合简单场景）：

this.bsModalRef.onHide?.subscribe(() => {
  console.log('allan');
});

• 使用对象形式订阅（适合需要处理错误、完成事件的场景）：

this.bsModalRef.onHide?.subscribe({
  next: () => {
    console.log('allan');
  }
});

问题2：ModalOptions配置结构错误 #

你创建的模态框配置对象错误嵌套了initialState属性，导致传入的title无法被模态框组件接收，同时不符合ngx-bootstrap的配置格式。

错误代码：

const initialState = {
  class: 'modal-lg',
  initialState: {
    title: 'User roles',        
  }
}  

修复后：

const modalOptions: ModalOptions = {
  class: 'modal-lg',
  initialState: {
    title: 'User roles'
  }
};

同时需要在模态框组件中添加@Input()装饰器接收参数：

// roles.model.component.ts
@Input() title = "";

问题3：BsModalRef初始化冗余 #

你提前通过new BsModalRef<RolesModelComponent>()初始化实例是不必要的，modalService.show()会返回正确的模态框实例，直接声明为可选类型即可：

// user-management.component.ts
bsModalRef: BsModalRef<RolesModelComponent> | undefined;

完整修复后的关键代码片段 #

user-management.component.ts（openRolesModal方法）

openRolesModal() {
  const modalOptions: ModalOptions = {
    class: 'modal-lg',
    initialState: {
      title: 'User roles'
    }
  };

  this.bsModalRef = this.modalService.show(RolesModelComponent, modalOptions);
  this.bsModalRef.onHide?.subscribe(() => {
    console.log('模态框已关闭，执行后续逻辑');
    // 这里可以添加你需要执行的代码，比如重新获取用户角色列表
    this.getUsersWithRoles();
  });
}

roles.model.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-roles-model',
  templateUrl: './roles-model.component.html',
  styleUrls: ['./roles-model.component.css']
})
export class RolesModelComponent implements OnInit {
  @Input() title = "";
  constructor(public bsModalRef: BsModalRef) {}

  ngOnInit(): void {}
}

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