本文详解如何在 Angular 中通过模板引用变量（Template Reference Variable）将父组件中的自定义模板片段传递给子组件，并使其能安全访问子组件自身的内部数据（如 items.count），从而实现高内聚、低耦合的 UI 复用，无需暴露子组件数据逻辑给父组件。

本文详解如何在 Angular 中通过模板引用变量（Template Reference Variable）将父组件中的自定义模板片段传递给子组件，并使其能安全访问子组件自身的内部数据（如 `items.count`），从而实现高内聚、低耦合的 UI 复用，无需暴露子组件数据逻辑给父组件。

在 Angular 组件开发中，常需兼顾「封装性」与「定制化」：子组件应自主管理数据获取与状态（如通过 HTTP 请求加载 items），但又需允许父组件灵活控制部分 UI 渲染逻辑（例如自定义总计栏 {{items.count}} 的展示样式）。此时，单纯依赖 @Input() 会破坏封装——因为父组件无法直接访问子组件私有字段；而 ng-content 又仅支持静态投影，无法绑定子组件上下文数据。

✅ 正确解法：模板引用变量 + 局部上下文绑定

Angular 支持通过 #ref 语法为子组件创建模板引用变量，该变量在父组件模板中即代表子组件实例，可安全访问其 public 成员（包括 @Input() 属性、方法及公开字段）。只要子组件将 items 声明为 public（默认即 public），父组件即可在 <ng-container></ng-container> 或直接嵌套内容中通过 ref.items.count 访问。

✅ 实现步骤

1. 子组件：确保数据属性为 public 并完成数据加载

// lookup.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lookup',
  template: `
    <h1>I'm the sonny</h1>
    <div *ngFor="let item of items">
      <span>{{ item.name }}</span>
      <span>{{ item.value }}</span>
    </div>
    <div>Total: {{ items?.count || 0 }}</div>
    <ng-content></ng-content>
  `
})
export class LookupComponent implements OnInit {
  // ✅ 必须声明为 public（默认即 public），否则父模板无法访问
  items: { name: string; value: number }[] = [];
  count = 0;

  ngOnInit() {
    // 模拟异步加载（如 HttpClient.get(...)）
    setTimeout(() => {
      this.items = [
        { name: 'A', value: 10 },
        { name: 'B', value: 20 }
      ];
      this.count = this.items.reduce((sum, i) => sum + i.value, 0);
    }, 500);
  }
}

2. 父组件：使用 #ref 引用子组件，并在 <ng-content></ng-content> 区域内绑定其属性

<!-- parent.component.html -->
<h1>I'm the papa</h1>
<app-lookup #data>
  <div>Some fixed content</div>
  <!-- ✅ 安全访问子组件 public 字段：data.items.count -->
  <div>The cool total: {{ data.items?.count || 'loading...' }}</div>
  <!-- ✅ 也可调用子组件方法（若已定义） -->
  <!-- <button (click)="data.refresh()">Refresh</button> -->
</app-lookup>

⚠️ 注意事项：

• #data 是对 LookupComponent 实例的引用，仅在父组件模板中生效，不可在父组件 TypeScript 逻辑中直接使用（如 this.data 会报错）；
• 若需在父组件 TS 中操作子组件，请改用 @ViewChild(LookupComponent) 配合 AfterViewInit；
• items 必须是 public 字段（Angular 默认所有类成员均为 public，无需显式标注）；
• 使用 ?. 链式可选操作符避免初始渲染时报错（因 items 初始为 []，但 count 可能未及时赋值）；
• 此方式不破坏子组件封装：父组件仅消费子组件主动暴露的接口，不参与数据获取逻辑。

? 进阶：支持多区域内容插槽（Named Slots）

若需更精细控制（如分别定制“头部”、“总计区”、“尾部”），可结合 ng-template 与 @ContentChild：

// lookup.component.ts（增强版）
import { Component, ContentChild, TemplateRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-lookup',
  template: `
    <h1>I'm the sonny</h1>
    <div *ngFor="let item of items">...</div>

    <!-- 自定义总计区 -->
    <ng-container *ngIf="totalTemplate; else defaultTotal">
      <ng-container *ngTemplateOutlet="totalTemplate; context: { $implicit: items?.count }"></ng-container>
    </ng-container>
    <ng-template #defaultTotal>Total: {{ items?.count }}</ng-template>

    <ng-content></ng-content>
  `
})
export class LookupComponent implements AfterContentInit {
  @ContentChild('total') totalTemplate!: TemplateRef<{ $implicit: number }>;
  items: any[] = [];
  // ... 其他逻辑
}

父组件调用：

<app-lookup #data>
  <ng-template #total let-count>
    ? Custom Total: <strong>{{ count }}</strong>
  </ng-template>
  <div>Fixed footer</div>
</app-lookup>

✅ 总结

方案	是否封装数据	是否支持子组件上下文绑定	推荐场景
@Input()	❌（父控数据）	✅（但需父提供）	简单配置项、静态内容
ng-content	✅	❌（无上下文）	纯静态布局占位
模板引用变量 #ref	✅	✅（访问 ref.xxx）	推荐：动态内容定制 + 数据自治
@ContentChild + TemplateRef	✅	✅（强类型上下文）	复杂插槽、高复用 UI 库

通过模板引用变量，你既保持了子组件的数据主权，又赋予父组件强大的 UI 定制能力——这是 Angular 实现「智能内容投影（Smart Content Projection）」的核心实践。