Angular 18中TemplateRef上下文丢失问题求助

你的代码存在几个关键问题，导致模板上下文为空且按钮显示空白：

1. 模板引用变量不匹配 #

组件中@ViewChild要获取的模板变量是theTemplateReference，但模板里定义的模板变量是#theActualTemplate，两者名称不一致，导致theTemplateReference实际指向的不是你定义的模板，ngTemplateOutlet自然无法正确渲染带上下文的内容。

2. 重复渲染模板且未传递上下文 #

你在模板里用*ngTemplateOutlet尝试渲染模板，同时又在ngAfterViewInit里调用vcr.createEmbeddedView再次渲染模板，但这次调用没有传递上下文对象，这会额外渲染一个不带任何数据的模板实例，也是导致空白内容的原因之一。

3. 按钮无显示文本 #

按钮标签<button (click)="action(templateTitle)"></button>里没有任何文本内容，所以即使上下文正常，按钮也会显示空白。

修复后的完整代码 #

import { Component, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-template-ref',
  standalone: true,
  imports: [],
  template:`
  <ng-container *ngTemplateOutlet="theActualTemplate; context: context">
    Template not rendered
  </ng-container>
 
  <ng-template #theActualTemplate let-templateTitle="title" let-action="someMethod">
    <h2>{{templateTitle}}</h2>
    <button (click)="action(templateTitle)">点击触发</button>
  </ng-template>
  `,
  styleUrl: './template-ref.component.scss'
})
export class TemplateRefComponent {
  context = {
    title: 'templateRef Title',
    someMethod(title: string) {
      alert(`Alert for ${title}`);
    }
  }
}

关键修改说明 #

• 移除了不必要的AfterViewInit、ViewChild和ViewContainerRef，直接在模板中使用#theActualTemplate作为ngTemplateOutlet的目标，简化代码。
• 确保ngTemplateOutlet的模板引用与定义的模板变量一致，上下文对象正确传递。
• 给按钮添加了显示文本点击触发，解决按钮空白问题。
• 移除了多余的vcr.createEmbeddedView调用，避免重复渲染无上下文的模板。

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