angular学习总结-组件插槽
组件插槽 - Angular官网上叫内容投影,Vue也有一样的功能实现分枝功能技术框架master原APP考勤应用代码angular4+ionic3+Cordovadev迁移钉钉第一版代码,h5微应用angular4+ionic3upgrade迁移钉钉最新版代码,h5微应用angular12+ionic5...
·
组件插槽 - 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> 元素都不匹配的投影组件。
如上述例子中的默认插槽。
更多推荐
已为社区贡献4条内容
所有评论(0)