Angular 组件中的 ng-content 指引-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 开发中，我们通常会创建组件来实现页面中的各种功能。在组件中，我们可以使用 ng-content 指令来实现灵活的内容投影，使得组件可以接受任意的 HTML 内容，从而能够更好地适应各种场景。

ng-content 的基本用法

ng-content 指令可以在组件的模板中用来标记一个插入点，用于接收外部传入的内容。具体来说，我们可以在组件的模板中使用 ng-content 标签来定义一个插入点，如下所示：

<ng-content></ng-content>

上述代码表示在组件的模板中定义了一个 ng-content 标签，用于接收外部传入的内容。当组件被使用时，外部传入的内容将会被插入到这个标签所在的位置。

下面是一个简单的组件示例，其中使用了 ng-content 指令：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="my-component">
      <h2>My Component</h2>
      <ng-content></ng-content>
    </div>
  `,
})
export class MyComponent {}

上述代码定义了一个名为 MyComponent 的组件，其中使用了 ng-content 指令来接收外部传入的内容。当该组件被使用时，外部传入的内容会被插入到 ng-content 标签所在的位置。

ng-content 的高级用法

除了基本用法之外，ng-content 指令还支持一些高级用法，可以帮助我们更加灵活地使用组件。

1. 选择器

ng-content 指令支持使用选择器来指定接收哪些类型的内容。具体来说，我们可以在 ng-content 标签中使用 select 属性来指定一个选择器，如下所示：

<ng-content select=".foo"></ng-content>

上述代码表示只有符合 .foo 选择器的内容才会被插入到 ng-content 标签所在的位置。

下面是一个示例，其中使用了选择器来限制外部传入的内容：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="my-component">
      <h2>My Component</h2>
      <ng-content select=".foo"></ng-content>
    </div>
  `,
})
export class MyComponent {}

上述代码中，ng-content 标签使用了 .foo 选择器，只有符合该选择器的内容才会被插入到组件中。

2. 多个插入点

ng-content 指令还支持定义多个插入点，以便更加灵活地接收外部传入的内容。具体来说，我们可以在组件的模板中定义多个 ng-content 标签，如下所示：

<div class="my-component">
  <h2>My Component</h2>
  <ng-content select=".header"></ng-content>
  <div class="content">
    <ng-content select=".body"></ng-content>
  </div>
  <ng-content select=".footer"></ng-content>
</div>

上述代码定义了一个名为 MyComponent 的组件，其中定义了三个插入点：.header、.body 和 .footer。当该组件被使用时，外部传入的内容会根据选择器被插入到对应的插入点中。

下面是一个示例，其中使用了多个插入点：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="my-component">
      <h2>My Component</h2>
      <div class="header" *ngIf="header">
        <ng-content select=".header"></ng-content>
      </div>
      <div class="content">
        <ng-content select=".body"></ng-content>
      </div>
      <div class="footer" *ngIf="footer">
        <ng-content select=".footer"></ng-content>
      </div>
    </div>
  `,
})
export class MyComponent {
  header = true;
  footer = true;
}

上述代码中，MyComponent 组件定义了三个插入点：.header、.body 和 .footer。当 header 或 footer 属性为 true 时，对应的插入点才会被渲染出来。这样，我们就可以根据需要选择性地使用插入点来接收外部传入的内容。

总结

ng-content 指令是 Angular 组件中非常重要的一部分，它可以帮助我们更加灵活地接收外部传入的内容，使得组件可以适应更多的场景。除了基本用法之外，ng-content 指令还支持选择器和多个插入点等高级用法，可以帮助我们更好地使用组件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650bb42595b1f8cacd5c9512