Angular4学习笔记(八)- ng-content
来源:互联网 发布:鼠标编程是什么意思 编辑:程序博客网 时间:2024/05/21 22:45
内容投影
ng-content
ng-content
是一个占位符,有些类似于router-outlet
。
以前举の例子,父组件包含子组件都是直接指明子组件的selector
,比如子组件的selector
叫app-child
,那么嵌入父组件时直接指明即可:
<app-child></app-child>
这是很硬性的编码,而ng-content
就是用来替代这种硬性编码的。
比如有个父组件这样定义:
@Component({ selector: 'app-parent', template: ` <p>Parent Component</p> <div style="background: cyan"> <ng-content></ng-content> </div> `})
它表示被放进的内容的背景色统一设置为cyan
。
接下来就要将子组件放入父组件中,放置的方式很简单,在根组件中将app-child
插入到app-parent
中即可:
<app-parent> <app-child></app-child></app-parent>
多个投影
上例中只有一个投影,那么多个投影怎么办呢?<ng-content>
支持一个 select
属性,可以让你在特定的地方投射具体的内容。该属性支持 CSS 选择器(my-element
,.my-class
,[my-attribute]
,…)来匹配你想要的内容。如果 ng-content
上没有设置 select
属性,它将接收全部内容,或接收不匹配任何其他 ng-content 元素的内容。
比如父组件上有两个可投影的位置,一个背景为浅绿,一个为粉红:
<div style="background: cyan"> <ng-content select="[name=child]"></ng-content> </div> <div style="background: pink"> <ng-content select=".red"></ng-content> </div>
此时可以在根组件上定义如下:
<app-parent> <app-child class="red"></app-child> <app-child name="child"></app-child> </app-parent>
这样就可以对号入座了!
ContentChild
理解了ng-content
就可以使用@ContentChild
装饰器来调用投影内容了,它和@ViewChild
非常类似,就不多做介绍了,其异同点列举如下:
相同点
- 都是属性装饰器
- 都有对应的复数形式装饰器:ContentChildren、ViewChildren
- 都支持 Type|Function|string 类型的选择器
不同点
- ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素
- ViewChild 用来从模板视图中获取匹配的元素
- 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素
- 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素
参考
- ng-content 中隐藏的内容
- Angular 2 ContentChild & ContentChildren
阅读全文
0 0
- Angular4学习笔记(八)- ng-content
- Andrew Ng 机器学习笔记(八)
- angular4学习笔记(一)
- Andrew NG机器学习课程笔记(八)
- <ng-content></ng-content>学习小记
- Angular4学习笔记(三):router
- Angular4学习笔记(四):service
- Angular4学习笔记(五):http
- Angular4学习笔记(六):解耦
- Angular4学习笔记(七):界面优化
- Angular4学习笔记(一)-环境搭建
- Angular4学习笔记(三)- 路由
- Angular4学习笔记(四)- 依赖注入
- Angular4学习笔记(一)
- Angular4学习笔记(三)
- Angular4学习笔记(四)
- Angular4学习笔记(五)
- Angular4学习笔记(六)
- LeetCode 693 Binary Number with Alternating Bits 带有交替位的二进制数
- getParameter与getAttribute
- winform程序中使用js(2)
- RANSAC算法详解
- Centos7上编译安装PHP7
- Angular4学习笔记(八)- ng-content
- 集合( LinkedList,HashSet,Collection ) 总结
- 结构化异常处理(SEH)
- 数字图像处理作业3
- XTU C语言程序设计实践作业6
- 整理部分新学习的Linux命令
- Python与MySQL数据库
- css—水平(横向)滚动条
- 计算机网络概述--总结