Angular 9升级至12后向子组件传递TemplateRef失效问题求解

从Angular 10版本开始，框架收紧了跨组件传递TemplateRef的作用域绑定规则：Angular 9及更早版本中，父组件传递给子组件的模板会默认继承父组件的执行上下文，而后续版本为了避免作用域污染，改为必须显式传递上下文，模板才能访问父组件的变量，这就是你当前遇到不依赖外部变量的模板可以正常渲染，依赖父组件links变量的模板异常的核心原因。

这里提供最通用的显式传递上下文的实现方式： #

步骤1：修改父组件代码 #

在父组件定义模板时声明接收上下文变量，同时给子组件传递模板的同时传递对应的上下文对象：

<!-- 父组件HTML -->
<ng-template #navTemplate let-linkList="links">
  <a *ngFor="let link of linkList">{{link}}</a>
</ng-template>
<child-component 
  [navTemplate]="navTemplate"
  [navContext]="{links: links}"
></child-component>

步骤2：修改子组件TS代码 #

新增Input接收父组件传递的上下文对象：

// 子组件TS
@Input() navTemplate: TemplateRef<any>;
@Input() navContext: Record<string, any>;

步骤3：修改子组件HTML代码 #

渲染模板时传入上下文对象：

<!-- 子组件HTML -->
<ng-container *ngTemplateOutlet="navTemplate; context: navContext"></ng-container>

• 如果需要传递多个变量，直接在navContext对象中添加对应的键值对，模板中用let-自定义变量名="context中的键名"接收即可
• 如果只有一个参数要传递，可以在上下文对象中设置$implicit属性作为默认值，模板中直接用let-自定义变量名就可以接收，不需要写等号和键名

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