本文详解 ng-bootstrap 模态框中数据传递的生命周期风险，对比 `componentinstance.data` 直接赋值、`@input()` + `ngonchanges`、服务注入三种方案，指出异步场景下的潜在竞态问题，并推荐基于 observable 的响应式数据流实践。
在使用 @ng-bootstrap/ng-bootstrap 构建模态框时，官方文档常推荐如下数据传递方式：
const modalRef = this.modalService.open(NgbdModalContent); modalRef.componentInstance.data = 'Hello World';
并在模态组件中通过 @Input() 接收：
@Component({
template: `<div>{{ data }}</div>`
})
export class NgbdModalContent {
@Input() data!: string;
ngOnInit(): void {
console.log(this.data); // ✅ 通常能打印出值，但不保证！
}
}⚠️ 问题核心：这不是真正的 @Input() 绑定，而是手动属性赋值
modalService.open() 创建的是动态实例（非模板声明式渲染），因此 Angular 的变更检测机制不会触发 ngOnChanges —— 这正是你观察不到 ngOnChanges 被调用的原因。componentInstance.data = ... 是对组件实例属性的直接写入，发生在组件已创建但尚未进入 Angular 生命周期钩子执行序列的间隙。若 data 依赖异步操作（如 HTTP 请求结果），而 ngOnInit 中立即使用该值，就存在典型的竞态条件（race condition）：ngOnInit 可能在赋值前执行。
✅ 推荐方案：使用 injector + InjectionToken 实现类型安全、可订阅的数据传递
避免手动赋值带来的时序不确定性，应将数据作为依赖项，在组件初始化前就注入：
// 1. 定义唯一 Token
export const MODAL_DATA = new InjectionToken<any>('ModalData');
// 2. 模态组件构造器中注入
@Component({
selector: 'ngbd-modal-content',
template: `<div>{{ data$ | async }}</div>`
})
export class NgbdModalContent {
data$: Observable<string>;
constructor(@Inject(MODAL_DATA) private data: Observable<string>) {
this.data$ = data; // 直接暴露为 Observable，支持异步/同步统一处理
}
}// 3. 打开模态框时传入数据（支持同步或异步）
const data$: Observable<string> = of('Hello').pipe(
delay(500), // 模拟异步加载
shareReplay({ bufferSize: 1, refCount: true })
);
const modalRef = this.modalService.open(NgbdModalContent, {
injector: Injector.create({
parent: this.injector,
providers: [{ provide: MODAL_DATA, useValue: data$ }]
})
});✅ 优势：
- 无竞态：数据在组件构造前注入，data$ 始终可用；
- 响应式友好：天然支持 async 管道、错误重试、加载状态管理；
-
类型安全：InjectionToken
提供编译期类型检查； - 解耦清晰：模态组件不依赖 modalService 或生命周期钩子顺序。
❌ 不推荐方案说明
- componentInstance.data = ... + ngOnInit：看似简洁，实则绕过 Angular 输入绑定机制，异步场景下极易出错，且难以测试；
- 全局服务共享状态：虽可行，但引入不必要的状态污染和内存泄漏风险（需手动清理），违背模态框“一次一用”的语义；
- ngOnChanges 监听 @Input()：在 modalService.open() 动态创建场景下完全无效，因无 Angular 模板绑定，SimpleChanges 不会触发。
? 总结
ng-bootstrap 的模态框本质是运行时动态组件，其数据流设计应遵循响应式原则而非模板驱动思维。永远优先选择 InjectionToken 注入 Observable 数据源，而非手动设置 componentInstance 属性。这不仅规避了生命周期陷阱，更让模态组件具备可预测性、可测试性和可扩展性——尤其当未来需要支持取消请求、加载骨架屏或错误重试时，优势立显。
