Angular中如何为contentChildren的每个子元素包裹独立元素？

嗨，这个问题我之前也碰到过——单纯用<ng-content>是没法实现给每个子元素单独套<li>的，因为普通的内容投影只会把所有子元素一次性放到指定位置，不会帮你遍历每个节点单独处理。要实现你想要的效果，得用@ContentChildren结合视图容器来动态生成结构，具体方案如下：

实现步骤 #

1. 组件模板与逻辑 #

首先创建app-layout-list组件，我们不需要在模板里写<ng-content>，而是通过代码动态处理子元素：

import { Component, ContentChildren, ElementRef, ViewChild, ViewContainerRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-layout-list',
  template: `
    <ul #listContainer></ul>
  `
})
export class LayoutListComponent implements AfterContentInit {
  // 获取组件的所有直接子元素（不包含深层后代）
  @ContentChildren(ElementRef, { descendants: false }) childElements!: ElementRef[];
  // 获取ul的视图容器，用于动态添加li元素
  @ViewChild('listContainer', { read: ViewContainerRef }) listContainer!: ViewContainerRef;

  ngAfterContentInit(): void {
    // 遍历每个子元素，给它们套上li后添加到ul中
    this.childElements.forEach(childEl => {
      const liElement = document.createElement('li');
      // 将原有的子元素移动到li内部
      liElement.appendChild(childEl.nativeElement);
      // 把li添加到ul容器里
      this.listContainer.element.nativeElement.appendChild(liElement);
    });
  }
}

2. 使用方式 #

完全按照你想要的方式使用即可：

<app-layout-list>
  <p>foo</p>
  <p>bar</p>
  <p>etc</p>
</app-layout-list>

3. 效果说明 #

组件运行后，会自动生成如下DOM结构：

<ul>
  <li><p>foo</p></li>
  <li><p>bar</p></li>
  <li><p>etc</p></li>
</ul>

补充说明 #

• 如果你的子元素是Angular组件而非原生HTML元素，@ContentChildren(ElementRef)依然能正常工作，因为组件最终会渲染为DOM节点。
• 若需要处理深层嵌套的子元素，可以把@ContentChildren的descendants参数设为true，但这样会把所有后代元素都单独套li，根据你的需求调整即可。

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