Angular循环迭代中实现重复内容投影的技术咨询

问题原因 #

你当前的实现里，<ng-content>的工作机制是移动而非复制外部传入的DOM节点。也就是说，外部的<ion-label>只会被移动到组件内最后一次循环的<ng-content>位置，所以只会在最后一次迭代中显示。

解决思路 #

要实现每次迭代都渲染传入的内容，需要让父组件传入一个模板(TemplateRef)，子组件在循环中复用这个模板，每次迭代都渲染该模板的副本，同时可以传递当前循环项的上下文数据。

修改后的代码实现 #

1. 子组件类（myComponent.ts）

添加输入属性和模板引用的获取：

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

@Component({
  selector: 'my-component',
  templateUrl: './myComponent.html'
})
export class MyComponent {
  @Input() dataProvider: any[] = [];
  // 获取父组件传入的模板
  @ContentChild(TemplateRef) itemTemplate!: TemplateRef<any>;
}

2. 子组件模板（myComponent.html）

在循环模板中通过ngTemplateOutlet渲染父组件传入的模板：

<ng-container *ngFor="let item of dataProvider">
  <ng-template *ngTemplateOutlet="tmpContent; context: {$implicit: item}">
  </ng-template>
</ng-container>

<ng-template #tmpContent let-item>
  <div>
    {{item.id}}
    <!-- 渲染父组件传入的模板，并传递当前item作为上下文 -->
    <ng-template *ngTemplateOutlet="itemTemplate; context: {$implicit: item}">
    </ng-template>
  </div>
</ng-template>

3. 使用示例

父组件中通过<ng-template>声明要重复渲染的内容，还可以通过let-item获取当前循环项的数据：

<my-component [dataProvider]="source">
  <ng-template let-item>
    <!-- 这里可以放任意内容，比如ion-label、自定义组件等 -->
    <ion-label> 测试内容 - 项ID: {{item.id}} </ion-label>
  </ng-template>
</my-component>

效果说明 #

这样修改后，每次循环都会渲染父组件传入的模板内容，每个迭代的内容都是独立的，而且可以访问当前循环的item数据，完全满足你声明式传入任意内容并在每次迭代中投影的需求。

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