Angular使用ng-template实现动态组件时遇到的生命周期钩子相关问题

上下文配置类问题排查 #

• 确认ngTemplateOutlet/createEmbeddedView传入的上下文格式符合要求：
  若使用默认值传参，必须将默认值绑定到$implicit字段，模板内可直接通过let-xxx声明取值；若为自定义字段，上下文对象的key必须和模板内let-xxx="key"的key完全匹配，否则会返回undefined。
• 异步上下文需先判空再渲染模板：如果上下文数据来自接口、rxjs流等异步场景，建议给ng-template外层加*ngIf="context"判断，避免空值导致的取值异常。
• 动态注入模板时不要漏传上下文参数：使用ViewContainerRef.createEmbeddedView方法时，上下文为必填的第二个参数，示例如下：

// 正确写法
const view = this.viewContainer.createEmbeddedView(this.tplRef, {
  $implicit: '默认公共值',
  userInfo: this.currentUser
})

生命周期使用不当类问题排查 #

• 不要在ngOnInit钩子中获取TemplateRef引用或执行模板渲染：@ViewChild查询的模板引用在ngOnInit阶段尚未完成初始化，拿到的值为undefined，相关逻辑必须迁移到ngAfterViewInit钩子中执行。
• 条件渲染的模板引用需适配查询配置：如果ng-template带*ngIf条件渲染，@ViewChild需配置{ static: false }，且要在条件触发、模板渲染完成后再获取引用，避免空引用报错。
• 渲染完成后手动触发变更检测：动态渲染模板后如果出现ExpressionChangedAfterItHasBeenCheckedError报错，需在渲染逻辑后调用ChangeDetectorRef.detectChanges()手动触发变更检测，示例如下：

constructor(private cdr: ChangeDetectorRef, private viewContainer: ViewContainerRef) {}

ngAfterViewInit() {
  if (this.tplRef) {
    this.viewContainer.createEmbeddedView(this.tplRef, this.tplContext)
    this.cdr.detectChanges()
  }
}

快速定位技巧 #

• 模板内所有变量均为undefined：优先排查上下文参数是否漏传、key是否匹配
• 偶发TemplateRef空引用报错：优先排查生命周期时机、模板是否带条件渲染逻辑
• 变更检测类报错：优先排查ngAfterViewInit内是否修改了模板绑定变量，是否未手动触发变更检测

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