组件插槽 - Angular官网上叫内容投影,Vue也有一样的功能实现——插槽slot。他俩是同一种概念,目的是用来创建更加灵活的且可复用组件。

内容投影是一种模式,你可以在其中插入或投影要在另一个组件中使用的内容。

在 Angular 中内容投影的常见包括:

  • 单插槽内容投影。使用这种类型的内容投影,组件可以从单一来源接受内容。
  • 多插槽内容投影。在这种情况下,组件可以从多个来源接受内容。
  • 有条件的内容投影。使用条件内容投影的组件仅在满足特定条件时才渲染内容。
    (其中, 有条件的内容投影这里暂不做介绍,大家感兴趣可以去官网学习。)

单插槽内容投影

功能:创建一个组件,你可以在其中投影一个组件。

在单插槽和多插槽的内容投影中,我们需要借助ng-content元素来实现投影。

<ng-content> 元素是一个占位符,它不会创建真正的 DOM 元素。
示例:

1.在子组件child.component.html内添加一个插槽。

<div style="background: yellowgreen;width: 100%;height: 90px">
  <h3>子组件区域</h3>
  <ng-content></ng-content>
</div>

2.在父组件home中引入子组件child,并在home.page.html内添加引入app-child,再设置投影内容。

<div style="background: pink;width: 100%;height: 100%;">
  <h1>父组件区域</h1>
  <app-child>
    <p>我是child组件的单插槽投影内容</p>
  </app-child>
</div>

3.效果图。
在这里插入图片描述

多插槽内容投影

一个组件可以拥有多个插槽,多插槽内容投影模式下,每个插槽可以设置一个css选择器,由选择器决定哪些内容对应到该插槽。

通过使用 <ng-content> 的 select 属性来完成此任务。
示例:

还是上面那个例子改一下。
1.在子组件child.component.html内添加3个插槽,其中包含一个默认插槽。

<div style="background: yellowgreen;width: 100%;padding: 10px 3px;">
  <h3>子组件区域</h3>
  <!-- 插槽一 -->
  <ng-content select="[slot1]"></ng-content>
  <div style="width: 300px;background: #fff;padding: 10px 3px;">
    <!-- 插槽二 -->
    <ng-content select="[slot2]"></ng-content>
  </div>
  <!-- 默认插槽 -->
  <ng-content></ng-content>
</div>

2.在父组件home中引入子组件child,并在home.page.html内添加引入app-child,再设置投影内容。

<div style="background: pink;width: 100%;height: 100%;">
  <h1>父组件区域</h1>
  <app-child>
    <p slot1>我是插槽1投影内容</p>
    <p slot2 style="color: red;">我是插槽2投影内容</p>
    <p>我是默认插槽投影内容</p>
  </app-child>
</div>

3.效果图。
在这里插入图片描述

使用 slot1 属性的内容将投影到带有 select=[slot1] 属性的 <ng-content> 元素。
如果你的组件包含不带 select 属性的 <ng-content> 元素,
在这里插入代码片则该实例将接收所有与其他 <ng-content> 元素都不匹配的投影组件。
如上述例子中的默认插槽。
Logo

前往低代码交流专区

更多推荐