Angular内容投影：如何在投影内容中访问组件数据？

要实现调用方在投影内容里访问组件内部的data（比如处理后的大写用户名数组），核心是通过模板上下文传递数据，具体可以用两种方式：

方式一：使用ng-template与TemplateRef传递上下文 #

这是最灵活的方案，适合需要自定义展示逻辑的场景：

1. 组件内部定义：

   • 接收@Input()的原始数据，处理后得到内部的processedData（比如转大写）
   • 用@ContentChild获取调用方传入的模板
   • 在组件模板中渲染模板并传递上下文

   组件类代码：

   import { Component, Input, ContentChild, TemplateRef, OnInit } from '@angular/core';
   
   interface User {
     name: string;
     id: number;
   }
   
   @Component({
     selector: 'test-component',
     template: `
       <!-- 组件自身的控制元素，比如过滤/分页按钮 -->
       <button (click)="filterData()">过滤数据</button>
       
       <!-- 渲染调用方传入的模板，并传递处理后的数据 -->
       <ng-container *ngTemplateOutlet="userTemplate; context: { $implicit: processedData }"></ng-container>
     `
   })
   export class TestComponent implements OnInit {
     @Input() data: User[] = [];
     @ContentChild(TemplateRef) userTemplate!: TemplateRef<any>;
     processedData: User[] = [];
   
     ngOnInit() {
       // 初始化处理数据：用户名转大写
       this.processedData = this.data.map(user => ({
         ...user,
         name: user.name.toUpperCase()
       }));
     }
   
     filterData() {
       // 内部修改数据的逻辑，比如过滤ID大于2的用户
       this.processedData = this.processedData.filter(user => user.id > 2);
     }
   }
   

2. 调用方使用：
   传入ng-template，通过let-users接收上下文里的处理后数据，然后自定义遍历展示：

   <test-component [data]="originalUsers">
     <ng-template let-users>
       <ul>
         <li *ngFor="let user of users">ID: {{user.id}}，用户名：{{user.name}}</li>
       </ul>
     </ng-template>
   </test-component>
   

方式二：使用组件实例变量（不推荐，但简单场景可用） #

如果场景简单，可以给组件加模板引用变量，直接访问组件的processedData：

调用方代码：

<test-component #testComp [data]="originalUsers">
  <ul>
    <li *ngFor="let user of testComp.processedData">ID: {{user.id}}，用户名：{{user.name}}</li>
  </ul>
</test-component>

注意：这种方式会暴露组件内部的processedData变量，破坏封装性，只适合简单演示场景，生产环境推荐第一种方式。

适用场景说明 #

这种方案完全匹配你提到的带分页/过滤的表格组件需求：

• 组件内部负责数据的分页、过滤、排序等逻辑，维护处理后的数据集
• 调用方通过模板自定义表格的列展示、样式，甚至添加额外操作按钮
• 组件内部数据更新后，投影内容会自动同步渲染最新数据

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