当前第2页 返回上一页
app.component.html
1 2 3 4 5 6 7 8 9 | <app-card>
<header>
<h1>Angular</h1>
</header>
<div>Not match any selector</div>
<content>One framework. Mobile & desktop.</content>
<footer><b>Super-powered by Google </b></footer>
<div>This text will not not be shown</div>
</app-card>
|
会发现两个 div 都没有渲染在页面中，为了解决这个问题，我们可以在组件中添加一个没有任何 selector 的 ng-content 标签。所有没办法匹配到任何其他插槽的内容都会被渲染在这个里面。
card.component.html
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="card">
<div class="header">
<ng-content select="header"></ng-content>
</div>
<div class="content">
<ng-content select="content"></ng-content>
</div>
<div class="footer">
<ng-content select="footer"></ng-content>
</div>
<ng-content></ng-content>
</div>
|
ngProjectAs
在某些情况下，我们需要使用 ng-container 把一些内容包裹起来传递到组件中。大多数情况是因为我们需要使用结构型指令像 ngIf 或者 ngSwitch 等。比如只有在某些情况下才向 card 组件传递 header。
在下面的例子中，我们将 header 包裹在了 ng-container 中。
1 2 3 4 5 6 7 8 9 | <app-card>
<ng-container>
<header>
<h1>Angular</h1>
</header>
</ng-container>
<content>One framework. Mobile & desktop.</content>
<footer><b>Super-powered by Google </b></footer>
</app-card>
|
由于 ng-container 的存在，header 部分并没有被渲染到我们想要渲染的插槽中，而是渲染到了没有提供任何 selector 的 ng-content 中。
在这种情况下，我们可以使用 ngProjectAs 属性。
在上面的 ng-container 加上这个属性，就可以按照我们的期望来渲染了。
1 2 3 4 | <app-card>
<ng-container ngProjectAs='header'>
...
</app-card>
|
更多编程相关知识，请访问：编程教学！！
以上就是浅谈Angular如何使用ng-content进行内容投影的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
浅谈Angular中组件的生命周期
20个优秀的Angular开源项目，你了解几个呢？
聊聊Angular指令中的prelink和postlink函数
浅谈Angular组件的交互方式
Angular中的firebase身份验证（代码示例）
13个关于Angular的前端面试题（总结）
Angular material的使用详解
如何安装和使用Angular cli？（图文详解）
浅谈Angular中的变化检测(change detection)
浅谈Angular中的component/service
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 浅谈Angular如何使用ng-content进行内容投影
