Angular动态创建多级组件时子/孙组件首次加载不渲染问题

我们基于JSON数据搭了一套动态组件创建框架用来生成复杂表单，动态创建组件的核心代码如下：

const questionComponent = FieldComponentMap[childField.shortName];    
viewContainerRef.createComponent<QuestionComponent>(questionComponent);

这类动态生成的组件可以递归创建自己的子组件，最终形成多级嵌套的组件树，框架整体设计思路是通顺的。现在框架能跑，但有个很明显的问题：子级甚至孙级的动态组件经常在首次进页面的时候渲染不出来，必须等用户操作页面、或者有状态变更触发更新之后才会显示。

已经试过的排查方案：把所有动态组件创建逻辑从ngOnInit生命周期挪到ngAfterContentInit里，问题没解决。
想要的效果：页面首次加载的时候就能把所有层级的表单组件完整渲染出来。

这是Angular动态组件场景的典型问题，核心原因是多级动态组件递归创建的过程，没有被纳入Angular首次变更检测的执行范围：

• Angular默认的变更检测逻辑是从根组件开始，顺着模板结构从上往下同步走检查流程。用viewContainerRef.createComponent手动创建组件的时候，如果组件实例化的时机刚好卡在当前层级的变更检测跑完之后，尤其是嵌套创建的深层组件，这些新生成的组件视图不会被当次变更检测扫到，自然就显示不出来。
• 把创建逻辑从ngOnInit挪到ngAfterContentInit没用，本质是因为这两个钩子都在组件初始化的靠前阶段，递归创建深层组件的时候，Angular不会自动回头去检查刚加进来的嵌入式视图，只要不手动触发对应视图的变更检测，深层组件就一直卡在未渲染的状态，直到用户交互、路由跳转这类操作触发新一轮全局变更检测才会出来。
• 要是动态组件用了ChangeDetectionStrategy.OnPush变更检测策略，这个问题必现。

按优先级操作即可解决问题：

• 每一层动态组件创建完成后，手动触发该组件实例的变更检测
  这是最稳、性能开销最小的解法，不用改生命周期的位置，也不用动全局的变更检测策略。拿到createComponent返回的组件引用后，直接调用组件自带变更检测器的detectChanges方法就行，嵌套创建的子组件也按一样的逻辑处理：

  // 创建动态组件
  const componentRef = viewContainerRef.createComponent(questionComponent);
  // 在这里写完给组件传输入参数、配置实例的逻辑
  // 强制当前新建组件立刻跑一遍自身和子组件的变更检测
  componentRef.changeDetectorRef.detectChanges();
  

• 如果动态组件用了OnPush策略，每次更新输入属性、修改内部状态之后，记得调用组件实例的changeDetectorRef.markForCheck()，把当前组件到根组件的整条检查路径标记为需要检查，保证变更检测能扫到这个组件。
• 尽量别在ngAfterViewInit这种当前组件视图已经跑完首次变更检测的钩子里创建深层嵌套动态组件。如果业务限制必须放在这类钩子里，就按第一条的方式手动调detectChanges，别用setTimeout、Promise.resolve().then()这类写法等下一个事件循环碰运气触发检测，这类写法会带来不可控的时序bug，平白增加性能开销。

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