Angular中如何传递可渲染模板给子组件并使用其内部数据？

要实现父组件传递可访问子组件内部数据的模板，同时保持子组件的数据封装（不使用@Input/@Output），可以通过Angular的ng-template、TemplateRef和ngTemplateOutlet结合上下文传递来实现，具体步骤如下：

1. 父组件中定义自定义模板 #

在父组件里用<ng-template>包裹需要自定义的内容，通过let-xxx语法声明接收子组件传递的上下文变量：

<h1>I'm the papa</h1>
<app-lookup>
  <!-- 固定内容直接放在组件标签内，由子组件的ng-content渲染 -->
  <div>Some fixed content</div>
  <!-- 自定义模板，用let-items接收子组件传入的items数据 -->
  <ng-template let-items="items">
    <div>The cool total: {{items?.count}}</div>
  </ng-template>
</app-lookup>

2. 子组件中获取模板并传递上下文 #

在子组件的TS代码中，通过@ContentChild获取父组件传递的模板，待内部数据加载完成后，用ngTemplateOutlet渲染模板并传入子组件的内部数据作为上下文：

子组件TS代码

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

@Component({
  selector: 'app-lookup',
  templateUrl: './lookup.component.html'
})
export class LookupComponent implements OnInit {
  // 子组件自行获取的内部数据
  items: { list: Array<{name: string, value: number}>, count: number } | undefined;

  // 获取父组件传递的自定义模板
  @ContentChild(TemplateRef) customTemplate!: TemplateRef<any>;

  ngOnInit() {
    // 模拟HTTP请求获取数据（实际场景替换为真实请求）
    setTimeout(() => {
      this.items = {
        list: [{name: 'Item 1', value: 15}, {name: 'Item 2', value: 25}],
        count: 40
      };
    }, 1000);
  }
}

子组件HTML代码

<h1>I'm the sonny</h1>
<!-- 子组件自身的列表渲染 -->
<div *ngFor="let item of items?.list">
  <span>{{item.name}}</span>
  <span>{{item.value}}</span>
</div>
<!-- 渲染父组件传递的固定内容 -->
<ng-content></ng-content>
<!-- 渲染父组件的自定义模板，传入子组件的items作为上下文 -->
<ng-container 
  *ngIf="customTemplate && items"
  [ngTemplateOutlet]="customTemplate"
  [ngTemplateOutletContext]="{ items: items }"
></ng-container>

原理说明 #

• ng-template：父组件用来定义可复用的模板片段，本身不会直接渲染
• @ContentChild(TemplateRef)：子组件用来获取父组件传递进来的模板引用
• ngTemplateOutlet：子组件用来渲染获取到的模板，同时通过ngTemplateOutletContext将自身内部数据作为上下文传递给模板，父组件的模板就能通过let-xxx语法访问这些数据
• 数据完全封装在子组件内部，父组件仅负责定义展示模板，无需知晓数据来源

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