在组件角度中绑定两个 ng-content

在 Angular 中，<ng-content> 标签允许我们插入一段原始的 HTML 片段，它可以在组件中的任何一个位置被调用。但是，在某些情况下，我们可能需要在组件中绑定多个 <ng-content> 标签，让它们分别位于组件的不同位置。那么，该如何实现呢？本文将会介绍如何在组件角度中绑定两个 <ng-content>。

创建基本组件

首先，我们需要创建一个基本组件，如下所示：

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="wrapper">
      <h3><ng-content select=".title"></ng-content></h3>
      <div class="content"><ng-content select=".body"></ng-content></div>
    </div>
  `,
  styles: [`
    .wrapper {
      border: 1px solid #aaa;
      padding: 10px;
    }
    .content {
      margin-top: 20px;
    }
  `]
})
export class MyComponent {}

该组件包含一个 <div> 标签，内部有两个 <ng-content> 标签，分别用于显示标题和内容。

在父组件中使用

接下来，我们在父组件中使用该组件，并尝试向其中插入标题和内容。

<app-my-component>
  <h2 class="title">这里是标题</h2>
  <p class="body">这里是内容</p>
</app-my-component>

在该示例中，<h2> 标签包含 class="title" 属性，因此它将被插入到匹配 <ng-content select=".title"> 的位置上；同样地，<p> 标签包含 class="body" 属性，因此它将被插入到匹配 <ng-content select=".body"> 的位置上。

总结

在 Angular 中，我们可以很容易地绑定多个 <ng-content> 标签，并让它们分别位于组件的不同位置上。只需要在组件中分别指定它们的位置和选择器即可。

代码片段：

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="wrapper">
      <h3><ng-content select=".title"></ng-content></h3>
      <div class="content"><ng-content select=".body"></ng-content></div>
    </div>
  `,
  styles: [`
    .wrapper {
      border: 1px solid #aaa;
      padding: 10px;
    }
    .content {
      margin-top: 20px;
    }
  `]
})
export class MyComponent {}

<app-my-component>
  <h2 class="title">这里是标题</h2>
  <p class="body">这里是内容</p>
</app-my-component>