Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

前面介绍了 Angular 如何利用 @Input @Output 来提高组件的复用性。

但是 @Input @Output 只解决了组件中控制层数据复用的问题,

但是在很多场合,我们需要解决组件中视图层的复用问题。

我们希望能将父组件的某组内容嵌入在子组件中,由子组件负责展示。

对于这个问题,Angular 提出了投影(project)的概念。

使得我们可以像下面一样使用子组件。

这里,我们把 items 作为投影放在子组件 ngx-simplebar 中使用。

投影

投影就是把父组件的中指定部分视图在子组件视图中引用的一种方法。

其中的关键组件就是 <ng-content>。

对于上面的例子,我们可以在 simplebar 的视图中这样使用这个投影。

这个就表明,simplebar 这个组件在视图层接受父组件(投影)的内容,

用来替换 <ng-content></ng-content>。

更高级的投影

我们有时候想在子组件中对父组件(投影)的内容进行自定义显示,

就可以请 select 属性帮忙。

如 <ng-content select=”[card-header]”></ng-content>  

表明子元素会在视图层显示父组件投影中的 <div card-header> 元素 。

当然 select 属性的用法比较灵活,这篇文章总结了其常见用法

这样做有什么好处呢

最大的好处就是可以对父组件的投影分而治之啦!

比如我们就可以在子组件视图层构造这样的代码。

相当于把父组件的投影自定义拆解成各个小部分,放在子组件视图中展示。

参考链接

How ng-content and selector can help you ?

发表评论

电子邮件地址不会被公开。 必填项已用*标注