如何在Angular中实现组件嵌套与组合（类似React children）？

Angular 中实现组件内容投影（对应 React 的 children 属性），核心是用 <ng-content> 指令，以下是具体实现步骤：

1. 父组件中定义内容投影点 #

在父组件的模板里添加 <ng-content>，它会自动渲染所有传入父组件标签内的子内容：

<!-- app-my-parent-component.component.html -->
<div class="parent-wrapper">
  <!-- 所有子组件/内容都会被投影到这里 -->
  <ng-content></ng-content>
</div>

父组件的 TypeScript 代码无需额外逻辑，保持基础组件定义即可：

// app-my-parent-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-parent-component',
  templateUrl: './app-my-parent-component.component.html'
})
export class MyParentComponent {}

2. 定义子组件 #

子组件就是普通的 Angular 自定义组件，无需特殊配置：

// app-my-child-component1.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-child-component1',
  template: '<div>子组件1内容</div>'
})
export class MyChildComponent1 {}

// app-my-child-component2.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-child-component2',
  template: '<div>子组件2内容</div>'
})
export class MyChildComponent2 {}

3. 组合使用组件 #

直接按照你给出的方式嵌套使用即可：

<app-my-parent-component>
  <app-my-child-component1></app-my-child-component1>
  <app-my-child-component2></app-my-child-component2>
</app-my-parent-component>

进阶：选择性投影 #

如果需要把不同子内容放到父组件的不同位置，可以给 <ng-content> 加 select 属性，指定投影特定内容：

<!-- 父组件模板 -->
<div class="parent-header">
  <ng-content select="[slot='header']"></ng-content>
</div>
<div class="parent-body">
  <ng-content select="[slot='body']"></ng-content>
</div>

使用时给子内容指定对应的 slot：

<app-my-parent-component>
  <div slot="header">父组件头部</div>
  <app-my-child-component1 slot="body"></app-my-child-component1>
  <app-my-child-component2 slot="body"></app-my-child-component2>
</app-my-parent-component>

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