【Angular】模板语法-内容投影（插槽）

Angular 内容投影（Content Projection）简介

内容投影（Content Projection）是 Angular 提供的一项非常强大的功能，它允许你在父组件中向子组件传递 HTML 内容，而不需要在子组件中显式地定义这些内容。简而言之，内容投影让你可以在子组件中嵌套和控制传递进来的内容。

1. 概念

在 Angular 中，内容投影的目的是将父组件的模板内容动态插入到子组件的模板中。这种方式类似于 HTML 中的 插槽（slots），或者是 React 中的 children 属性。通过这种方式，你可以创建更加灵活和可复用的组件。

2. 如何实现内容投影

Angular 中的内容投影是通过使用 <ng-content> 标签来实现的。你可以将父组件的内容放在子组件的模板中，并在子组件中使用 <ng-content> 标签来标记内容插入点。

2.1 基本用法：默认内容投影

父组件 向 子组件 传递 HTML 内容时，可以将内容放置在子组件的 <ng-content> 插槽中。

父组件：

<app-card>
  <h1>Angular Content Projection</h1>
  <p>This is some content passed from the parent component.</p>
</app-card>

子组件：（app-card.component.html）

<div class="card">
  <div class="card-header">
    <ng-content></ng-content>  <!-- 投影的内容 -->
  </div>
</div>

• 在这个示例中，父组件传递了一个 <h1> 和 <p> 元素，它们会被投影到子组件中，渲染在 <ng-content> 的位置。

2.2 多插槽内容投影

Angular 允许你使用多个 <ng-content> 标签来创建多个内容插槽。这允许父组件在不同的位置插入不同的内容。

父组件：

<app-card>
  <div class="header-content">
    <h1>Header</h1>
  </div>

  <div class="body-content">
    <p>This is the body content passed from the parent component.</p>
  </div>
</app-card>

子组件：（app-card.component.html）

<div class="card">
  <div class="card-header">
    <ng-content select=".header-content"></ng-content>  <!-- 投影 header-content -->
  </div>
  
  <div class="card-body">
    <ng-content select=".body-content"></ng-content>    <!-- 投影 body-content -->
  </div>
</div>

• 使用 select 属性，你可以指定投影插槽选择特定的内容。在这个例子中，.header-content 和 .body-content 类分别表示了两块内容插槽，Angular 会根据 select 的值将内容投影到指定位置。

2.3 使用 ng-content 投影动态内容

ng-content 不仅限于静态内容，它也可以用于动态生成的内容或复杂结构的插入。

父组件：

<app-card>
  <h1>{{ title }}</h1>  <!-- 动态内容 -->
</app-card>

子组件：（app-card.component.html）

<div class="card">
  <div class="card-header">
    <ng-content></ng-content>  <!-- 动态内容投影 -->
  </div>
</div>

• 在这个示例中，父组件通过数据绑定传递了一个动态的 title，而该内容会被插入到子组件中的 <ng-content> 标签位置。

2.4 默认内容投影与备用内容

你还可以使用 ng-content 结合 ng-template 来为没有内容投影的情况提供备用内容。

父组件：

<app-card></app-card> <!-- 没有内容传递 -->

子组件：

<div class="card">
  <div class="card-header">
    <ng-content></ng-content>
    <ng-template ngIf="!hasContent">No content provided</ng-template>  <!-- 提供备用内容 -->
  </div>
</div>

• 如果父组件没有传递内容，ng-content 不会渲染任何内容，而备用的 ng-template 内容会显示。

2.5 内容投影与嵌套组件

你可以将多个嵌套组件与内容投影结合使用，灵活地设计多个内容插槽。

父组件：

<app-card>
  <app-header>
    <h1>Header content</h1>
  </app-header>

  <app-body>
    <p>Body content</p>
  </app-body>
</app-card>

子组件（app-card）：

<div class="card">
  <div class="card-header">
    <ng-content select="app-header"></ng-content>  <!-- 投影 app-header -->
  </div>

  <div class="card-body">
    <ng-content select="app-body"></ng-content>  <!-- 投影 app-body -->
  </div>
</div>

• 通过 select 属性，子组件可以选择插入特定的元素标签。

3. 使用 ng-content 的应用场景

• 通用容器组件：你可以使用内容投影构建通用的容器组件，例如卡片组件、模态框组件、布局组件等，这些组件将接收父组件传递的内容并渲染它们。
• 自定义布局：内容投影使得父组件可以在子组件中插入自定义的 HTML 内容，因此可以灵活地定义布局而不改变子组件本身的实现。
• 模板重用：你可以创建带有占位符的模板，然后通过内容投影在不同的上下文中重用它们。

4. 内容投影的优点

• 高复用性：子组件可以根据不同的父组件内容需求进行重用，避免了硬编码特定内容。
• 灵活性：通过投影，父组件可以决定要插入什么内容，而子组件则专注于显示和布局。这减少了组件间的紧密耦合。
• 清晰分离：内容投影使得视图的结构和内容分离，父组件和子组件各自独立管理。

5. 总结

内容投影是 Angular 中一种非常强大的技术，它使得你能够灵活地在子组件中插入父组件传递的 HTML 内容。通过 <ng-content> 标签，你可以在子组件中标记插入点，并在父组件中指定要插入的内容。Angular 的内容投影支持多个插槽、动态内容、备用内容等功能，非常适合用于构建通用、可复用的组件。