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的更多相关文章

  1. Angular中ViewChild\ngAfterViewInit\Promise的使用,在父组件初始化时等待子组件的返回值

    1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...

  2. [Angular] Difference between Providers and ViewProviders

    For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...

  3. [Angular] Difference between ViewChild and ContentChild

    *The children element which are located inside of its template of a component are called *view child ...

  4. 4.认识Angular组件之2

    11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应 ...

  5. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

  6. {ICIP2014}{收录论文列表}

    This article come from HEREARS-L1: Learning Tuesday 10:30–12:30; Oral Session; Room: Leonard de Vinc ...

  7. angular2组件通讯的几种方式

    最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978: 1.通过输入型绑定把数据从父组件传到子组件 HeroChildComponen ...

  8. PP: Learning representations for time series clustering

    Problem: time series clustering TSC - unsupervised learning/ category information is not available. ...

  9. PP: Imaging time-series to improve classification and imputation

    From: University of Maryland encode time series as different types of images. reformulate features o ...

随机推荐

  1. HTML基础第六讲---表格

    转自:https://i.cnblogs.com/posts?categoryid=1121494 上一讲,讲了关于<控制表格及其表项的对齐方式>,在这里我要讲讲表格及其属性 ,然后大家在 ...

  2. python3输出range序列

    b=range(3)         #输出的是[0, 1, 2] ,其实这里如果用在循环上,代表着循环多少次,这里是循环3次.从零开始.print(list(b))

  3. 【河南省多校脸萌第六场 A】巴什博弈?

    [链接]http://acm.nyist.me/JudgeOnline/problem.php?cid=1013&pid=5 [题意] 在这里写题意 [题解] 0..a-1 YES a..a+ ...

  4. winform最大化后不遮挡任务栏

    在窗体初始化后添加一句代码 this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea;

  5. PyCharm下载主题以及个性化设置(详细)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载主题 1.在http://www.themesmap.com/theme.html上选择自己喜欢的主题点进去后进行下载. ...

  6. 驱动学习3-make

    在向内核中添加驱动的时候要完成3项工作 (1)在Kconfig中添加新代码对应项目的编译条件(下面Makefile文件中需要用到它定义的的宏变量) (2)将驱动源码添加到对应的目录中 (3)在目录Ma ...

  7. 在react底下安装环境

    1.在react底下安装环境 Image.png Image.png 2.新建一个文件夹 Image.png 3.配置入口文件redux:staticRoot+'/redux/app' Image.p ...

  8. sql for xml query sample

    sample 1: declare @x xml select @x='<ArrayOfScheduledTime> <ScheduledTime> <Recurrenc ...

  9. 10.13 android输入系统_多点触摸驱动理论与框架

    1.多点触摸驱动理论 驱动程序仅上报多个触点的位置就可以,是放大还是缩小由应用程序控制 对于多点触摸驱动在linux系统中有个输入子系统,其已经实现了open/read/write等接口 我们只需要实 ...

  10. 杭电ACM1197——Specialized Four-Digit Numbers

    题目的意思是从2992開始的四位数.每个四位数的10.12,16进制的数的每一位加起来都相等,就输出该数. 非常easy的一道题目. 以下的是AC的代码: #include <iostream& ...