Angular内容投影场景下$implicit值无法传递的问题排查

在研究ng-template（待渲染HTML）、ng-container（配合渲染ng-template）和ng-content（内容投影）的使用时，遇到特殊场景下$implicit值无法生效的问题：当在内容投影中通过ng-container的*ngTemplateOutlet提供上下文时，$implicit值未正常传递。

相关代码 #

app.component.html

<!-- app.component.html -->
<ng-template #inputTemplate let-labelDescription="inputLabel" let-defaultTagValue="inputValue">
  <label for="action">{{labelDescription}}</label><input id="idAction" value="{{defaultTagValue}}">
</ng-template>

<ng-template #buttonTemplate let-labelDescription="buttonLabel" let-defaultTagValue="buttonValue">
  <label for="action">label: {{labelDescription}}</label><h1><button id="idAction">my value : {{defaultTagValue}}</button></h1>
</ng-template>

<testing-componenet [id]="0" [description]="'send template button'">
  <ng-container *ngTemplateOutlet="buttonTemplate; context: { buttonLabel:'LABEL_BUTTON', $implicit: '..data..'}"></ng-container>
</testing-componenet>

testing-component.component.ts

// testing-component.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'testing-component',
  standalone: true,
  imports: [],
  template: "<p> {{id}} </p><p> {{description}} </p> <ng-content></ng-content>"
})
export class TestingComponentComponent {
    @Input( {required:true} )
    id!: number ;
    @Input( {required:true} )
    description!:string;
}

实际结果 #

预期结果 #

问题分析与解决方案 #

核心问题出在ng-template的变量绑定与上下文的key不匹配：

• buttonTemplate中用let-defaultTagValue="buttonValue"，表示要接收上下文里buttonValue这个key对应的值；
• 但*ngTemplateOutlet的context里只传了buttonLabel和$implicit，并没有buttonValue这个key，所以defaultTagValue无法获取到值。

有两种修正方式：

1. 修改模板绑定，让defaultTagValue接收$implicit的值：

<ng-template #buttonTemplate let-labelDescription="buttonLabel" let-defaultTagValue>
  <label for="action">label: {{labelDescription}}</label><h1><button id="idAction">my value : {{defaultTagValue}}</button></h1>
</ng-template>

2. 保持模板绑定不变，将上下文里的$implicit替换为buttonValue：

<ng-container *ngTemplateOutlet="buttonTemplate; context: { buttonLabel:'LABEL_BUTTON', buttonValue: '..data..'}"></ng-container>

另外注意代码中的拼写错误：<testing-componenet>应改为<testing-component>（与组件selector一致），虽不影响$implicit传递，但可能引发其他渲染问题。

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