Angular中ViewContainerRef.createComponent创建OnPush组件生命周期未触发问题

问题原因 #

当你使用ViewContainerRef.createComponent方法动态创建组件时，如果子组件设置了changeDetection: ChangeDetectionStrategy.OnPush，会出现子组件内容相关生命周期未触发的问题，本质是OnPush变更检测策略的限制：该策略下组件仅会在输入属性变更、内部异步事件触发、手动触发变更检测三种场景下执行变更检测，动态创建的组件默认不会自动触发首次变更检测，因此相关生命周期钩子不会正常执行。

解决方案 #

在原有代码的基础上，组件创建完成后手动调用一次变更检测即可：

private attachChildComponent = (childComponent: ComponentType<any>, container: ViewContainerRef) => {
    const componentFactory = this.factor.resolveComponentFactory(childComponent);
    const childComponentRef = container.createComponent(componentFactory);
    // 新增以下代码，手动触发首次变更检测
    childComponentRef.changeDetectorRef.detectChanges();
};

补充说明 #

• 如果后续需要更新子组件的输入属性，每次修改完成后，你可以调用childComponentRef.changeDetectorRef.markForCheck()标记需要变更检测，或者再次调用detectChanges()主动触发，确保子组件能感知到输入变化。
• 该改动不会影响默认变更检测策略的组件，兼容所有动态创建场景。

内容的提问来源于stack exchange，提问作者Bruno João