Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

@Input @Output 解决了组件中控制层数据传递的问题,但是在很多场合,我们需要解决组件中视图层(模板)传递的问题。比如,我们希望将父组件的模板内容传递给子组件,由子组件进行展示或者处理。在 Angular 中,这种视图层(模板)传递的方法也被称为投影(Project)。

投影

投影就是把父组件的中指定部分视图在子组件视图中引用的一种方法。其中的关键组件就是 <ng-content>。对于上面的例子,我们可以在 simplebar 的视图中这样使用这个投影。

这表明,simplebar 这个组件在视图层接受父组件(投影)的内容,用来替换 <ng-content></ng-content>。

更灵活的投影

有时候父组件投影到子组件可能包含了多个元素。而我们想将不同的元素放置在子组件模板的不同位置,此时就可以请 <ng-content> 的 select 属性帮忙。

如 <ng-content select=”[card-header]”></ng-content>   表明在子组件模板的这个位置,我们显示父组件投影中的 <div card-header> 元素 。select 属性的用法比较灵活,这篇文章总结了其常见用法

这样做有什么好处呢

最大的好处就是可以对父组件的投影分而治之啦!我们可以在子组件视图层构造这样的代码。把父组件的投影自定义拆解成各个小部分,放在子组件视图中展示。

参考链接

How ng-content and selector can help you ?

发表评论

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