Angular中如何将ng-template通过外层模板传递给子组件？

问题原因 #

Angular的内容投影（Content Projection）是在编译阶段确定的，子组件的@ContentChild会在组件初始化（ngAfterContentInit钩子）时尝试捕获父组件直接投影进来的模板引用。但*ngTemplateOutlet是运行时动态渲染模板内容，这部分内容不会被视为初始的内容投影，因此子组件无法通过@ContentChild获取到嵌套的#inner模板。

解决策略 #

策略1：直接传递目标模板（最推荐）

如果不需要外层模板的额外逻辑，直接将内层模板传递给子组件，跳过嵌套结构：

parent.component.html

<ng-template #inner>Content</ng-template>

<child>
  <ng-template #inner [ngTemplateOutlet]="inner"></ng-template>
</child>

或者更简洁地通过@Input传递模板引用，避免内容投影的限制：

parent.component.html

<ng-template #inner>Content</ng-template>

<child [innerTemplate]="inner"></child>

child.component.ts

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class Child {
  @Input() innerTemplate: TemplateRef<any>;
}

child.component.html

<ng-container *ngTemplateOutlet="innerTemplate"></ng-container>

策略2：预渲染嵌套模板再传递

如果必须保留外层模板的结构，可在父组件中先预渲染外层模板，捕获内层模板后再传递给子组件：

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html'
})
export class Parent implements AfterViewInit {
  @ViewChild('inner') innerTemplate: TemplateRef<any>;
  @ViewChild(Child) child: Child;

  ngAfterViewInit() {
    // 外层模板预渲染后，将内层模板传给子组件
    this.child.innerTemplate = this.innerTemplate;
  }
}

parent.component.html

<!-- 预渲染外层模板到隐藏容器，让Angular解析内层模板 -->
<ng-container *ngTemplateOutlet="outer" style="display: none;"></ng-container>

<child></child>

<ng-template #outer>
  <ng-template #inner>Content</ng-template>
</ng-template>

child.component.ts

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class Child {
  innerTemplate: TemplateRef<any>;
}

策略3：监听内容变化（备选）

如果无法预渲染，可在子组件中使用ContentChildren结合ngAfterContentChecked监听内容变化，但这种方式依赖Angular的变更检测，可靠性略低：

child.component.ts

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class Child implements AfterContentChecked {
  @ContentChildren(TemplateRef, { descendants: true }) templates: QueryList<TemplateRef<any>>;
  inner: TemplateRef<any>;

  ngAfterContentChecked() {
    // 从所有投影的模板中筛选出#inner
    this.inner = this.templates.find(tpl => tpl.elementRef.nativeElement.getAttribute('ng-template') === 'inner');
  }
}

内容的提问来源于stack exchange，提问作者Theo Siemens-Rhodes