Angular中怎么进行内容投影

在Angular中，内容投影（Content Projection）是一种将外部内容插入到组件模板中的技术。它允许开发者将父组件的内容传递到子组件中，并在子组件的模板中显示这些内容。内容投影是Angular中实现组件复用和灵活布局的重要手段之一。

1. 基本内容投影

Angular中最基本的内容投影方式是使用<ng-content>标签。<ng-content>标签充当一个占位符，用于接收父组件传递的内容。

示例

假设我们有一个子组件CardComponent，它的模板如下：

<!-- card.component.html -->
<div class="card">
  <div class="card-header">
    <ng-content select="[card-header]"></ng-content>
  </div>
  <div class="card-body">
    <ng-content></ng-content>
  </div>
</div>

在父组件中使用CardComponent时，可以通过以下方式传递内容：

<!-- app.component.html -->
<app-card>
  <div card-header>这是卡片标题</div>
  <p>这是卡片内容。</p>
</app-card>

在这个例子中，<div card-header>会被投影到<ng-content select="[card-header]">的位置，而<p>标签的内容会被投影到默认的<ng-content>位置。

2. 多插槽内容投影

在某些情况下，我们可能需要在子组件中定义多个插槽，以便更灵活地控制内容的投影位置。Angular允许我们通过select属性来指定不同的插槽。

示例

假设我们有一个TabComponent，它有两个插槽：header和content。

<!-- tab.component.html -->
<div class="tab">
  <div class="tab-header">
    <ng-content select="[tab-header]"></ng-content>
  </div>
  <div class="tab-content">
    <ng-content select="[tab-content]"></ng-content>
  </div>
</div>

在父组件中使用TabComponent时，可以通过以下方式传递内容：

<!-- app.component.html -->
<app-tab>
  <div tab-header>标签1</div>
  <div tab-content>这是标签1的内容。</div>
</app-tab>

在这个例子中，<div tab-header>会被投影到<ng-content select="[tab-header]">的位置，而<div tab-content>会被投影到<ng-content select="[tab-content]">的位置。

3. 条件内容投影

有时候，我们可能希望根据某些条件来决定是否投影某些内容。Angular允许我们在组件类中通过@ContentChild或@ContentChildren装饰器来获取投影内容，并在模板中根据条件进行渲染。

示例

假设我们有一个ConditionalCardComponent，它根据条件决定是否显示卡片内容。

// conditional-card.component.ts
import { Component, ContentChild } from '@angular/core';

@Component({
  selector: 'app-conditional-card',
  template: `
    <div class="card" *ngIf="showContent">
      <ng-content></ng-content>
    </div>
  `
})
export class ConditionalCardComponent {
  @ContentChild('content') content: any;
  showContent = false;

  toggleContent() {
    this.showContent = !this.showContent;
  }
}

在父组件中使用ConditionalCardComponent时，可以通过以下方式传递内容：

<!-- app.component.html -->
<app-conditional-card>
  <div #content>这是条件卡片内容。</div>
</app-conditional-card>
<button (click)="toggleContent()">切换内容</button>

在这个例子中，<div #content>会被投影到<ng-content>的位置，但只有在showContent为true时才会显示。

4. 动态内容投影

在某些复杂的场景中，我们可能需要动态地决定投影的内容。Angular提供了ng-template和ng-container来实现动态内容投影。

示例

假设我们有一个DynamicCardComponent，它允许动态地投影不同的内容。

<!-- dynamic-card.component.html -->
<div class="card">
  <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>

// dynamic-card.component.ts
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-card',
  templateUrl: './dynamic-card.component.html'
})
export class DynamicCardComponent {
  @Input() contentTemplate: TemplateRef<any>;
}

在父组件中使用DynamicCardComponent时，可以通过以下方式传递内容：

<!-- app.component.html -->
<ng-template #customContent>
  <p>这是动态卡片内容。</p>
</ng-template>

<app-dynamic-card [contentTemplate]="customContent"></app-dynamic-card>

在这个例子中，<ng-template #customContent>中的内容会被动态地投影到DynamicCardComponent中。

5. 总结

内容投影是Angular中非常强大的功能，它允许开发者将父组件的内容传递到子组件中，并在子组件的模板中灵活地显示这些内容。通过<ng-content>、select属性、@ContentChild、ng-template等技术，我们可以实现基本的内容投影、多插槽投影、条件投影以及动态投影。掌握这些技术可以帮助我们构建更加灵活和可复用的组件。