红色的生命周期钩子只能执行一次 而绿色的生命周期钩子可以执行很多次
看一下下面的例子
constructor()构造函数 第一个执行的函数 Onchanges()父组件实例化子组件的输入属性,每一次的输入属性发生变化之后都会调用次函数 ngOnInit也适用于 输入属性发生更新时的操作
先后调用的顺序如下图
*******ngOnchanges 详解
可变对象和 不可变对象
字符串就属于不可变对象
对象是可以变化的
如下图 : 第一个greeting 就是不可变对象 再次赋值时就是新创建一个字符串
第二个 user对象 就是可以随时变化更改的
我们在子组件中定义
、
在子组件的模板中
给子组件加上样式
同时 我们需要 在父组件给我们的子组件 传输入属性 所以也需要在父组件声明这两个数据
同时 我们看一下父组件的模板写法
我们来看一下结果图
结果表明 ngOnchanges只有在输入属性变化的时候才会被调用
输入属性变化的也是引用对象自身改变 才能够引起ngOnchanges的改变
************************ngDocheck 会频繁的调用 在脏治检测的时候 回调用
ngDocheck 要写的够高效 够轻量级 。
**************************** AfterViewInit
组件的模板已经被展现完成之后会被调用
****************************AfterViewChecked
组件的模板已经被展现完成之后会被调用
*****************************接下来我们来演示 AfterViewInit 和 AfterViewChecked
分别在 父子组件中写 来实现两个方法
子组件的这两个方法先执行 父组件的这两个方法后执行
并且初始化的init方法仅仅执行一次 而 check方法执行n次
如果想要在这两个方法里面修改数据 更改属性 就会抛出异常 如果想要避免这种异常的出现 我们需要将属性改变的代码放在 时间循环里面
投影 运行时动态的改变组件模板的内容
我们来看一下子组件的模板 子组件添加投影点
接下来 我们看一下父组件的 模板 父组件的模板底下的子组件部分的标签就会在
子组件的 投影点下展示出来。
接下来 我们看一下另外一种情况
我们在父组件模板中
下面是在子组件模板中
****&AfterContentInit 和 AfterContentChecked
我们分别在父子组件中分别实现这两个方法
我们可以在 这两个方法里面更改我们的 属性值
constructor 是实例化对象
ngOnchanges 更改输入属性
ngOninit 初始化 除了输入属性的其他属性
当组件销毁的时候回调用 ngOndestry
在路由地址发生改变的时候会调用 ngOnDestroy