Angular 中如何使用 ng-content 指令实现插槽（Slot）-JavaScript中文网-JavaScript教程资源分享门户

什么是 ng-content 指令

Angular 中的 ng-content 指令是用于创建插槽（Slot）的一个指令。在 Angular 组件模板中，我们可以使用 ng-content 指令创建一个标记，然后在组件调用时，将该标记替换为传入的具体内容。

如何使用 ng-content 指令

在组件模板中使用 ng-content 指令

假设我们有一个父组件和一个子组件，我们希望在父组件中插入子组件的内容，我们可以在父组件的模板中插入 ng-content 标记：

<app-child>
  <h1>这是子组件中的标题</h1>
  <p>这是子组件中的正文内容</p>
</app-child>

其中，app-child 是子组件的选择器。

对应的父组件模板如下：

<div class="container">
  <h2>这是父组件中的标题</h2>
  <ng-content></ng-content>
</div>

我们可以看到，在父组件的模板中，我们使用 ng-content 标记来表示将被替换的内容，ng-content 标记并没有任何具体的内容，它只是一个占位符。

在子组件中使用 ng-content 指令

在子组件中，我们需要告诉它，应该将哪些内容替换到父组件的 ng-content 标记中。我们可以使用具名插槽（Named Slots）和默认插槽（Default Slot）来实现。

使用默认插槽

默认插槽是父组件模板中没有提供具名插槽时使用的插槽，我们可以在子组件模板中使用 ng-content 标记来表示默认插槽：

<div>
  <h2>这是子组件中的标题</h2>
  <p>这是子组件中的正文内容</p>
  <ng-content></ng-content>
</div>

使用具名插槽

具名插槽是父组件模板中提供了名称的插槽，我们可以在子组件模板中使用 ng-content 标记来表示具名插槽。例如，我们可以在子组件中定义名为“footer”的插槽：

<div>
  <h2>这是子组件中的标题</h2>
  <p>这是子组件中的正文内容</p>
  <ng-content select="[slot=footer]"></ng-content>
</div>

这里使用了 select 属性来指定具名插槽的名称为“footer”。

在父组件中指定插槽内容

现在我们在父组件中使用子组件的选择器，并向子组件传递具体内容：

<app-child>
  <p slot="footer">这是子组件中的页脚</p>
</app-child>

这里的 p 标签中，使用了 slot 属性来指定它的作用是子组件中的插槽（“footer”为插槽名称）。

示例代码

父组件模板：

<div class="container">
  <h2>这是父组件中的标题</h2>
  <ng-content></ng-content>
  <hr>
  <h2>这是父组件中的页脚</h2>
  <ng-content select="[slot=footer]"></ng-content>
</div>

子组件模板：

<div>
  <h2>这是子组件中的标题</h2>
  <p>这是子组件中的正文内容</p>
  <ng-content></ng-content>
  <hr>
  <ng-content select="[slot=footer]"></ng-content>
</div>

父组件调用：

<app-child>
  <h3>这是子组件中的副标题</h3>
  <p>这是子组件中的正文内容</p>
  <p slot="footer">这是子组件中的页脚</p>
</app-child>

总结

Angular 中的 ng-content 指令可以帮助我们实现组件间的动态内容嵌套，通过创建插槽的方式，我们可以让组件更加灵活，更容易复用，提高代码的可维护性和可读性。

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