用ng-content使Angular中的自定义组件更灵活(二)

用ng-content使Angular中的自定义组件更灵活(一)中,给大家介绍了ng-content的基本用法,但那种方法只能在组件中保留一个ng-content, 组件只有一个可插入的占位符。那如果我们需要在组件中保留多个占位符该怎么做呢?

场景说明

要开发的目标如下图:
增强型卡片组件
你可以看到,相比老的卡片组件,我们在右下角(footer部分)增加了一个toolbar的区域,用户可以根据具体业务场景的需要,增加各种功能组件,比如增加一个按钮(Button),或是下拉菜单(dropdown),或者是增加几个组件的组合。这样就增加了卡片组件的灵活性。

基本实例

做法就是在卡片组件中再增加一个ng-content进行占位,那这样在卡片中就有两个ng-content,如何区分两者呢?Angular为我们提供了通过CSS选择符进行选择的方法。语法如下:

1
<ng-content select="<selector>"></ng-content>

组件定义

组件类的定义我们不需要改变,所以类的定义请参考用ng-content使Angular中的自定义组件更灵活(一)这篇文章。
模板定义修改如下:

1
2
3
4
5
6
7
8
9
10
11
<div class="card">
<div class="card-head">
{{title}}
</div>
<div class="card-content">
<ng-content select=".card-content"></ng-content>
</div>
<div class="card-footer">
<ng-content select=".card-footer-toolbar"></ng-content>
</div>
</div>

注意: 我们通过card-content和card-footer-toolbar来选择不同的ng-content

组件的使用

直接上代码,大家可以看到,我们现在将要插入组件的htm用div分为了两个部分,分别指名所用的CSS类,这样卡片组件就能区分如何插入代码到对应的位置。

1
2
3
4
5
6
7
8
9
10
11
<div *ngFor = "let todo of todos">
<app-card [title]="todo.title">
<div class="card-content">
<div>{{ todo.desc }}</div>
<div>{{ todo.done }}</div>
</div>
<div class="card-footer-toolbar">
<button>Remove</button>
</div>
</app-card>
</div>

本文标题:用ng-content使Angular中的自定义组件更灵活(二)

文章作者:晨星

发布时间:2019年06月03日 - 16:06

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/angular/angular-content-projection2/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。