app.component.html
1 2 3 4 5 6 7 8 9 |
|
会发现两个 div
都没有渲染在页面中,为了解决这个问题,我们可以在组件中添加一个没有任何 selector
的 ng-content
标签。所有没办法匹配到任何其他插槽的内容都会被渲染在这个里面。
card.component.html
1 2 3 4 5 6 7 8 9 10 11 12 |
|
ngProjectAs
在某些情况下,我们需要使用 ng-container
把一些内容包裹起来传递到组件中。大多数情况是因为我们需要使用结构型指令像 ngIf
或者 ngSwitch
等。比如只有在某些情况下才向 card 组件传递 header。
在下面的例子中,我们将 header 包裹在了 ng-container
中。
1 2 3 4 5 6 7 8 9 |
|
由于 ng-container
的存在,header 部分并没有被渲染到我们想要渲染的插槽中,而是渲染到了没有提供任何 selector 的 ng-content
中。
在这种情况下,我们可以使用 ngProjectAs
属性。
在上面的 ng-container
加上这个属性,就可以按照我们的期望来渲染了。
1 2 3 4 |
|
更多编程相关知识,请访问:编程教学!!
以上就是浅谈Angular如何使用ng-content进行内容投影的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Angular和vue.js的区别是什么?Angular和vue.js的深度对比
浅谈Angular中的变化检测(change detection)
浅谈Angular项目中如何引入第三方ui库(Angular material)
2021年值得尝试的7个Angular前端组件库,快来收藏吧!
更多相关阅读请进入《Angular》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者