如何手动触发 ComponentRef 的变更检测

在 angular 中动态创建组件后，需通过 componentref 的 changedetectorref.detectchanges() 手动触发变更检测，才能确保 @input 更新生效并触发 ngonchanges 生命周期钩子。

当使用 ComponentFactoryResolver（或现代 Angular 中推荐的 ViewContainerRef.createComponent()）动态创建组件时，Angular 并不会自动为该组件运行变更检测——尤其在你直接赋值给 instance 属性（如 componentRef.instance.inputProp = value）后，若未显式调用检测，ngonChanges 不会被触发，视图也不会更新。

关键点在于：每个 ComponentRef 实例都已内置 changeDetectorRef，无需额外注入或赋值。你只需在完成属性赋值后，立即调用：

ModalContentComponentRef.changeDetectorRef.detectChanges();

✅ 正确示例（精简优化版）：

const factory = this.componentFactoryResolver.resolveComponentFactory(component); const componentRef = factory.create(this.injector, [], dynamicCompContent);  // 必须先 attachView，否则 detectChanges 无效（ChangeDetectorRef 处于 detached 状态） this.applicationRef.attachView(componentRef.hostView);  // 插入 DOM（确保 hostView 有渲染上下文） document.body.appendChild(dynamicCompContent);  // 设置输入属性 Object.assign(componentRef.instance, {   input1: 1,   input2: 2,   compId: compInsId,   mountElId });  // ✅ 关键一步：手动触发变更检测 → 触发 ngOnChanges & 更新视图 componentRef.changeDetectorRef.detectChanges();  // 后续可订阅销毁逻辑等...

⚠️ 注意事项：

• attachView() 必须在 detectChanges() 之前调用，否则变更检测器处于分离状态，调用无效；
• 若组件使用了 OnPush 策略，detectChanges() 是唯一可靠的手动触发方式（markForCheck() 不足以触发 ngOnChanges）；
• 不要尝试将 ChangeDetectorRef 赋值给组件实例（如 instance.cdr = cdr），这既不必要也不起作用；ComponentRef.changeDetectorRef 已是该组件专属的、已绑定的检测器；
• Angular 14+ 推荐改用 ViewContainerRef.createComponent() 替代 ComponentFactoryResolver（后者已标记为 deprecated），语法更简洁且自动完成 attach：

const container = this.viewContainerRef; const componentRef = container.createComponent(component); componentRef.setInput('input1', 1); componentRef.setInput('input2', 2); // setInput 会自动触发变更检测（含 ngOnChanges），无需手动 detectChanges（但显式调用仍安全） componentRef.changeDetectorRef.detectChanges(); // 可选，但推荐保留以明确意图

? 总结：动态组件的变更检测控制权在开发者手中——ComponentRef.changeDetectorRef.detectChanges() 是触发 ngOnChanges 和同步更新视图的最直接、最可靠方式。牢记 attachView + detectChanges 的组合调用顺序，即可稳定实现响应式行为。