详解Angular组件之投影
网络编程 2021-07-04 13:23www.168986.cn编程入门
在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
概述
运行时动态改变组件模版的内容。没路由那么复杂,只是一段html,没有业务逻辑。
ngContent指令将父组件模版上的任意片段投影到子组件上。
一、简单例子
1、子组件中使用<ng-content>指令来标记投影点
<div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content> </div>
2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中
<div class="wrapper"> <h2>我是父组件</h2> <div>这个div定义在父组件中</div> <app-child2> <div>这个div是父组件投影到子组件中</div> </app-child2> </div>
效果:
子组件加样式:
.wrapper{ background: lightgreen; }
父组件加样式:
.wrapper{ background: cyan; }
二、多个<ng-content>投影点
子组件:
<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也被投影过去。
父组件模版中投影内容中插值表达式只能绑定父组件中的属性,虽然内容会被投影到子组件中去。
三、Angular属性绑定的方式插入html
在父组件模版中加一行:
<div [innerHTML]="divContent"></div>
父组件中加一个divContent属性,内容就是一段html片段。
divContent="<div>属性绑定绑innerHTML</div>";
效果
四、对比ngContent指令和属性绑定innerHTML方式
[innerHTML]是浏览器特定的API。
ngContent指令平台无关。可绑定多个投影点。
优先考虑ngContent指令
以上就是详解Angular组件之投影的详细内容,更多关于Angular组件之投影的资料请关注狼蚁SEO其它相关文章!
上一篇:详解Angular之路由基础
下一篇:详解Angular组件之生命周期(二)
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程