嵌套组件传递TemplateRef时出现undefined问题求助

你遇到的核心问题是模板作用域不匹配：exampleTemplate是作为内容投影传入standard-form的，它的作用域属于standard-form组件；而tab-group作为子组件，直接在自己的模板里引用exampleTemplate是找不到这个变量的，所以才会返回undefined。

正确实现步骤： #

1. 在standard-form中捕获模板引用
   用@ContentChild装饰器获取传入的exampleTemplate，让standard-form持有这个模板的引用：

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

@Component({
  selector: 'standard-form',
  template: `
    <tab-group [targetTemplate]="exampleTemplate"></tab-group>
  `
})
export class StandardFormComponent implements AfterContentInit {
  @ContentChild('exampleTemplate') exampleTemplate!: TemplateRef<any>;

  ngAfterContentInit() {
    console.log('standard-form获取到的模板:', this.exampleTemplate); // 这里能正常打印
  }
}

2. 在tab-group中接收模板输入
   给tab-group添加输入属性，接收从standard-form传递过来的模板：

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

@Component({
  selector: 'tab-group',
  template: `
    <ng-container *ngTemplateOutlet="targetTemplate"></ng-container>
  `
})
export class TabGroupComponent {
  @Input() targetTemplate!: TemplateRef<any>;
}

3. 父组件调用保持不变
   原来的模板传入代码无需修改，依然是把模板放在standard-form标签内：

<standard-form>
  <ng-template #exampleTemplate>
    <!-- 这里写你的模板内容 -->
    <p>这是要传递的模板内容</p>
  </ng-template>
</standard-form>

原写法失效原因 #

你之前直接在tab-group里写<ng-container *ngTemplateOutlet="exampleTemplate">，但tab-group的模板上下文里并没有exampleTemplate这个变量——这个模板属于standard-form的内容投影作用域，必须通过组件间的输入属性传递，才能让子组件拿到有效的模板引用。

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