介绍 & lt; div 类=皐rapper"比;
& lt;才能h3>我是子组件& lt;/h3>
& lt;才能div>这个div定义在子组件中& lt;/div>
& lt;才能ng-content> & lt;/ng-content>,
& lt;/div> & lt; div 类=皐rapper"比;
& lt;才能h3>我是父组件& lt;/h3>
& lt;才能div>这个div定义在父组件中& lt;/div>
& lt;才能app-child2>
,,,& lt; div>这个div是父组件投影到子组件中& lt;/div>
& lt;才能/app-child2>
& lt;/div> .wrapper {
,,,背景:,lightgreen;
} .wrapper {
,,,背景:,青色;
} & lt; div 类=皐rapper"比;
& lt;才能h3>我是子组件& lt;/h3>
& lt;才能ng-content 选择杆=?header"祝辞& lt;/ng-content>
& lt;才能div>这个div定义在子组件中& lt;/div>
& lt;才能ng-content 选择杆=?footer"祝辞& lt;/ng-content>,
& lt;/div> & lt; div 类=皐rapper"比;
& lt;才能h3>我是父组件& lt;/h3>
& lt;才能div>这个div定义在父组件中& lt;/div>
& lt;才能app-child2>
,,,& lt; div 类=癶eader"在这是页头,这个div是父组件投影到子组件中,标题是{{标题}}& lt;/div>
,,,& lt; div 类=癴ooter"在这是页脚,这个div是父组件投影到子组件中& lt;/div>
& lt;才能/app-child2>
& lt;/div> & lt; div [innerHTML]=癲ivContent"祝辞& lt;/div> divContent=? lt; div>属性绑定绑innerHTML
“; 本篇文章为大家展示了使用角组件怎么实现投影,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
1,子组件中使用& lt; ng-content>指令来标记投影点
2,父组件中把要投影到子组件的投影点的html片段写到子组件的标签中
效果:
子组件加样式:
父组件加样式:
二,多个& lt; ng-content>投影点
子组件:
父组件:
页头和页脚被投影到子组件中,同时标题也被投影过去。
父组件模版中投影内容中插值表达式只能绑定父组件中的属性,虽然内容会被投影到子组件中去。
三、角属性绑定的方式插入html
在父组件模版中加一行:
父组件中加一个divContent属性,内容就是一段html片段。
效果
四,对比ngContent指令和属性绑定innerHTML方式
[innerHTML]是浏览器特定的API。
ngContent指令平台无关。可绑定多个投影点。
优先考虑ngContent指令
上述内容就是使用角组件怎么实现投影,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
