[Angular] Difference between ngAfterViewInit and ngAfterContentInit
Content is what is passed as children. View is the template of the current component.
The view is initialized before the content and ngAfterViewInit()
is therefore called before ngAfterContentInit()
.
@Component({
selector: 'parent-cmp',
template: '<div #wrapper><ng-content></ng-content></div>'
})
class ParentComponent {
@ViewChild('wrapper') wrapper:ElementRef;
@ContentChild('myContent') content:ElementRef; ngAfterViewInit() {
console.log('ngAfterViewInit - wrapper', this.wrapper);
console.log('ngAfterViewInit - content', this.content);
} ngAfterContentInit() {
console.log('ngAfterContentInit - wrapper', this.wrapper);
console.log('ngAfterContentInit - content', this.content);
}
}
<parent-cmp><div #myContent>foo</div></parent-cmp>
If you run this code, the output for ngAfterViewInit - content
should be null
.
So if you want to change the child component's props, you cannot do it in 'ngAfterViewInit', you need to do it in 'ngAfterContentInit'.
[Angular] Difference between ngAfterViewInit and ngAfterContentInit的更多相关文章
- Angular中ViewChild\ngAfterViewInit\Promise的使用,在父组件初始化时等待子组件的返回值
1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...
- [Angular] Difference between Providers and ViewProviders
For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...
- [Angular] Difference between ViewChild and ContentChild
*The children element which are located inside of its template of a component are called *view child ...
- 4.认识Angular组件之2
11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应 ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
- {ICIP2014}{收录论文列表}
This article come from HEREARS-L1: Learning Tuesday 10:30–12:30; Oral Session; Room: Leonard de Vinc ...
- angular2组件通讯的几种方式
最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978: 1.通过输入型绑定把数据从父组件传到子组件 HeroChildComponen ...
- PP: Learning representations for time series clustering
Problem: time series clustering TSC - unsupervised learning/ category information is not available. ...
- PP: Imaging time-series to improve classification and imputation
From: University of Maryland encode time series as different types of images. reformulate features o ...
随机推荐
- HTML基础第六讲---表格
转自:https://i.cnblogs.com/posts?categoryid=1121494 上一讲,讲了关于<控制表格及其表项的对齐方式>,在这里我要讲讲表格及其属性 ,然后大家在 ...
- python3输出range序列
b=range(3) #输出的是[0, 1, 2] ,其实这里如果用在循环上,代表着循环多少次,这里是循环3次.从零开始.print(list(b))
- 【河南省多校脸萌第六场 A】巴什博弈?
[链接]http://acm.nyist.me/JudgeOnline/problem.php?cid=1013&pid=5 [题意] 在这里写题意 [题解] 0..a-1 YES a..a+ ...
- winform最大化后不遮挡任务栏
在窗体初始化后添加一句代码 this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea;
- PyCharm下载主题以及个性化设置(详细)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载主题 1.在http://www.themesmap.com/theme.html上选择自己喜欢的主题点进去后进行下载. ...
- 驱动学习3-make
在向内核中添加驱动的时候要完成3项工作 (1)在Kconfig中添加新代码对应项目的编译条件(下面Makefile文件中需要用到它定义的的宏变量) (2)将驱动源码添加到对应的目录中 (3)在目录Ma ...
- 在react底下安装环境
1.在react底下安装环境 Image.png Image.png 2.新建一个文件夹 Image.png 3.配置入口文件redux:staticRoot+'/redux/app' Image.p ...
- sql for xml query sample
sample 1: declare @x xml select @x='<ArrayOfScheduledTime> <ScheduledTime> <Recurrenc ...
- 10.13 android输入系统_多点触摸驱动理论与框架
1.多点触摸驱动理论 驱动程序仅上报多个触点的位置就可以,是放大还是缩小由应用程序控制 对于多点触摸驱动在linux系统中有个输入子系统,其已经实现了open/read/write等接口 我们只需要实 ...
- 杭电ACM1197——Specialized Four-Digit Numbers
题目的意思是从2992開始的四位数.每个四位数的10.12,16进制的数的每一位加起来都相等,就输出该数. 非常easy的一道题目. 以下的是AC的代码: #include <iostream& ...