3-1 组件生命周期(1)


ngDoCheck理解为angular去检查内部各类值的变化
ngAfterContentInit:理解为组件里面嵌套的一些内容,它初始化完毕。
ngAfterContentChecked:投影初始化以后,系统会检查投影的内容,检查属性的变化。为何要检查属性的变化,经过检查属性的变化,反馈到视图上去。
数组

代码实战

组件在默认新建的时候已经实现了一个接口OnInit

而后有一个ngOnInit的方法,这个钩子函数已经默认建在这了。


模板默认生成的时候 也给咱们建了一个构造器


打印两个东西,查看日志




实现Oninit的接口其实能够不加。

这里暂时先删掉。


由于已经有了模式的钩子函数。ngOninit()



可是推荐实现这个接口。

增长OnInit接口的好处,咱们因为某种失误,把ngOnInit函数误删了

这里就会提示错误,说 应该实现OnInit的接口。

实现接口自动生成的代码

在团队合做中其实会有一些做用。有些新人可能不太了解要实现什么样的接口。实现这个接口,在ngOnInit被删除后就会启动规范和约束的做用。就会提示错误 说须要实现OnInit的接口。

若是删掉了接口,tsLint其实也会提示实现这个接口。
安全

接口是可选的,也就说只要有相似ngOnInit这样的方法存在,声明周期的钩子函数仍是正常执行,但建议实现接口,好处是不会因为误删除某个钩子函数,另外一个是对组件涉及哪些声明周期一目了然





ngOnInit方法内,组件这个类自己就已经构造完毕了。因此在这里的类 ,咱们能够很是安全的使用它

框架

ngOnChange

智能提示dom




导入SimpleChanges

把changes属性打印出来看一下

输入属性是一个字典类型的,字典的每个key值就是你输入的参数


当前值,第一个值,和上一个值都传过来。

tsLint提示咱们要实现这个接口。
函数


实现接口OnChanges
3d

实现接口并导入对应的包
日志

父组件内演示

为了让你们更清楚onChanges,在它的父组件中改变一下

这是原来的父组件的内容。





每次点击的时候,处理这个值。
定义颜色的数组。
Math.floor取整数, Math.random取0到不到1的随机数乘以3 就是0不到3的随机数






再点击一次
blog

ngDoCheck

输入了ngDoCheck后,就会有错误提示 ,绿色的线标识,官方认为一个组件内不该该同时定义ngDoCheck和ngOnChanges这两个函数。
这两个钩子函数要达到的目的某种角度来讲是相似的,只不过DoCheck要作脏值监测,。 
为何组件的属性变化,或者说是状态变化后,会体如今界面当中,由于angular框架会对全部组件的状态进行维护和监测,一但有值发生变化,就会去监测,doCheck这种角度来讲就干这个用的。
onChange的区别就是监听本身组件自己的属性变化。doCheck是angular在作整个大的框架型的检查的时候,到达这个组件的时候,它就会发生doCheck的这个事件。
一个是框架帮你作的就是doCheck,一个是你主动关心的也就是OnChanges。因此他俩在某种角度是重合的




这里先无论,先在doCheck内输出
接口

结束