如何将投影内容中ngFor的上下文切换至包裹组件？

这个问题的核心在于Angular投影内容的作用域规则——默认情况下，投影内容的绑定上下文是它所在的父组件，而不是包裹它的组件。要实现你想要的效果，我们需要把投影内容转换成可复用的模板，然后在包裹组件中接管循环逻辑，并通过上下文传递数据。

核心思路 #

• 将父组件中原本带*ngFor的内容提取为一个模板（TemplateRef）。
• 在包裹组件中获取这个模板，然后用自己的items数组进行循环。
• 通过*ngTemplateOutlet的context参数，把当前循环的item传递给模板，让模板使用包裹组件的数据。

正确实现代码 #

1. 包裹组件（MyWrapperComponent）

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

@Component({
  selector: 'my-wrapper',
  template: `
    <!-- 用包裹组件自己的items执行循环逻辑 -->
    <ng-container *ngFor="let item of items">
      <!-- 动态渲染投影的模板，并传递当前item作为上下文数据 -->
      <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
    </ng-container>
  `
})
export class MyWrapperComponent {
  // 获取父组件中标记为#itemTemplate的模板实例
  @ContentChild('itemTemplate', { static: false }) itemTemplate!: TemplateRef<any>;
  
  // 包裹组件自身的数据源
  items = [
    { id: 0, name: "foo"},
    { id: 1, name: "bar"}
  ];
}

2. 使用包裹组件的父组件

import { Component } from '@angular/core';

@Component({
  selector: 'some-component',
  template: `
    <my-wrapper>
      <!-- 用ng-template定义单个item的渲染模板，#itemTemplate是模板引用标识 -->
      <!-- let-item 表示接收上下文里的隐式变量，命名为item -->
      <ng-template #itemTemplate let-item>
        <div>
          <h3>{{item.name}}</h3>
          <p>ID: {{item.id}}</p>
        </div>
      </ng-template>
    </my-wrapper>
  `
})
export class SomeComponent {
  // 这个items不会被使用，循环逻辑已由包裹组件接管
  items = ['text 1'];
}

关键细节说明 #

• @ContentChild('itemTemplate')：专门用来捕获父组件投影进来的、带有指定引用标识的模板实例。
• *ngTemplateOutlet：Angular提供的动态渲染模板指令，context参数是传递给模板的数据集。这里{ $implicit: item }表示把当前循环的item作为“隐式变量”传递，模板中可以通过let-item直接接收。
• 父组件移除*ngFor：循环逻辑完全交给包裹组件处理，父组件只需要专注于单个item的UI结构定义即可。

效果验证 #

运行后页面会渲染包裹组件中items的内容：

• foo
• ID: 0
• bar
• ID: 1

完全满足你“让投影内容使用包裹组件的绑定而非父组件”的需求。

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