脚本宝典收集整理的这篇文章主要介绍了详解Angular组件之投影,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
运行时动态改变组件模版的内容。没路由那么复杂,只是一段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组件之投影的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的详解Angular组件之投影全部内容,希望文章能够帮你解决详解Angular组件之投影所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。