Angular中如何实现包裹组件的动态组件数组内容投影？

可以实现该需求，无需修改主应用的HTML结构，仅需调整FsChipsComponent的代码和模板即可完成每个fs-chip的包裹。以下是两种可行方案：

方案1：DOM操作实现（无需修改子组件） #

通过Angular的生命周期钩子和DOM操作，在内容投影完成后为每个fs-chip添加包裹容器。

FsChipsComponent 模板 #

<!-- 接收所有投影内容的容器（后续会移除） -->
<ng-content #projectedContent></ng-content>

<!-- 最终渲染包裹后的chips -->
<div #renderTarget></div>

FsChipsComponent 代码 #

import { Component, ContentChild, ElementRef, AfterContentInit, ViewChild, Renderer2 } from '@angular/core';

@Component({
  selector: 'fs-chips',
  templateUrl: './fs-chips.component.html'
})
export class FsChipsComponent implements AfterContentInit {
  @ContentChild('projectedContent', { read: ElementRef }) projectedContent!: ElementRef;
  @ViewChild('renderTarget', { read: ElementRef }) renderTarget!: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterContentInit(): void {
    // 获取所有投影进来的fs-chip元素
    const chipElements = this.projectedContent.nativeElement.querySelectorAll('fs-chip');
    
    // 为每个chip添加wrapper并渲染到目标容器
    chipElements.forEach((chip: HTMLElement) => {
      const wrapper = this.renderer.createElement('div');
      this.renderer.addClass(wrapper, 'wrapper');
      
      this.renderer.appendChild(wrapper, chip);
      this.renderer.appendChild(this.renderTarget.nativeElement, wrapper);
    });

    // 移除原投影容器，避免重复渲染
    this.renderer.removeChild(
      this.projectedContent.nativeElement.parentNode,
      this.projectedContent.nativeElement
    );
  }
}

方案2：内容查询+模板渲染（适配异步场景） #

如果主应用的chips是异步加载的，可通过ContentChildren监听子组件变化，更优雅地处理动态生成的fs-chip。

FsChipsComponent 模板 #

<!-- 直接渲染包裹后的chips -->
<div class="chips-container">
  <div class="wrapper" *ngFor="let chipRef of chipElements">
    <ng-container [ngTemplateOutlet]="chipRef.instance.templateRef"></ng-container>
  </div>
</div>

<!-- 接收投影内容的隐藏容器 -->
<ng-content></ng-content>

前置修改（仅需一次） #

给FsChipComponent添加模板引用，方便父组件渲染：

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

@Component({
  selector: 'fs-chip',
  template: `
    <ng-template #chipTemplate>
      {{chip.name}}
    </ng-template>
  `
})
export class FsChipComponent {
  @Input() value!: any;
  @ViewChild('chipTemplate') templateRef!: TemplateRef<any>;
}

FsChipsComponent 代码 #

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { FsChipComponent } from './fs-chip.component';

@Component({
  selector: 'fs-chips',
  templateUrl: './fs-chips.component.html'
})
export class FsChipsComponent implements AfterContentInit {
  @ContentChildren(FsChipComponent) chipElements!: QueryList<FsChipComponent>;

  ngAfterContentInit(): void {
    // 监听chips动态变化，异步加载时自动重新渲染
    this.chipElements.changes.subscribe(() => {
      // 变化时无需额外操作，*ngFor会自动更新
    });
  }
}

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