目录概述一、简单例子1、子组件中使用<ng-content>指令来标记投影点2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中二、多个<ng-co
运行时动态改变组件模版的内容。没路由那么复杂，只是一段html，没有业务逻辑。
ngContent指令将父组件模版上的任意片段投影到子组件上。
<div class="wrapper">
<h2>我是子组件</h2>
<div>这个div定义在子组件中</div>
<ng-content></ng-content>
</div>
<div class="wrapper">
<h2>我是父组件</h2>
<div>这个div定义在父组件中</div>
<app-child2>
<div>这个div是父组件投影到子组件中</div>
</app-child2>
</div>效果：
子组件加样式：
.wrapper{
background: lightgreen;
}父组件加样式：
.wrapper{
background: cyan;
}
子组件：
<div class="wrapper">
<h2>我是子组件</h2>
<ng-content selecter=".header"></ng-content>
<div>这个div定义在子组件中</div>
<ng-content selecter=".footer"></ng-content>
</div>父组件：
<div class="wrapper">
<h2>我是父组件</h2>
<div>这个div定义在父组件中</div>
<app-child2>
<div class="header">这是页头，这个div是父组件投影到子组件中,title是{{title}}</div>
<div class="footer">这是页脚，这个div是父组件投影到子组件中</div>
</app-child2>
</div>
页头和页脚被投影到子组件中，同时title也被投影过去。
父组件模版中投影内容中插值表达式只能绑定父组件中的属性，虽然内容会被投影到子组件中去。
在父组件模版中加一行：
<div [innerHTML]="divContent"></div>父组件中加一个divContent属性，内容就是一段html片段。
divContent="<div>属性绑定绑innerHTML</div>";效果
[innerHTML]是浏览器特定的api。
ngContent指令平台无关。可绑定多个投影点。
优先考虑ngContent指令
以上就是详解Angular组件之投影的详细内容，更多关于Angular组件之投影的资料请关注编程网其它相关文章！
--结束END--
本文标题: 详解Angular组件之投影
本文链接: https://www.lsjlt.com/news/126645.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0