Angular学习二--生命周期

Chan已失踪
399 阅读3分钟

1.生命周期钩子函数

  1. ngOnchanges :当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit之前。 范围:指令和组件 ,接口名称: OnChanges

    #1.ngOnchanges 在父组件(初始化或修改)子组件的输入参数下调用, 用在有输入属性的子组件

    用处:当Angular设置数据绑定输入属性发生变化时响应.

    时机: 当被绑定的输入属性的值发生变化时调用，不过首次调用是会发生在ngOnInit()之前的

    ngOnChanges() 方法获取了一个对象，它可以同时观测1个/多个绑定的属性值，它把每个发生变化的属性名都映射到了一个SimpleChange对象，该对象中有属性的当前值和前一个值

    触发条件：

    @input属性(输入属性)发生变化时，会调用.非此属性，不会调用

    当输入属性对象时，当对象的属性值发生变化时，不会调用，当对象的引用变化时触发

    输入属性,使用@input 装饰的属性，这里还需要注意不可变对象，在angular中，典型的不可变对象是string类型，但所有的自定义对象均为可变对象， 如user:{name : string } ，可变对象即使被定义为输入属性，也不会触发OnChanges方法，当修改子组件参数时，只有以下情况ngOnchanges才会被调用

    输入属性@input()属性

    不可变对象: undefined , null , boolean ,number , string

    可变对象：对象(包括数组和函数)

    可变对象

    var greeting = 'hello'

    greeting = 'hello world'

    greeting的值发生改变,因为其指向的字符串地址从hello指向了hello world

    不可变对象

    var user = { name :Tom }

    user.name = 'Jim'

    user的指向的内存地址并没有改变，改变的是user对象中的name属性 ngOnChanges钩子接收一个类型为SimpleChange 的映射对象，包括新值和旧值

  2. ngOnInit 在第一轮ngOnChanges完成之后调用，发生于构造函数之后，用于初始化指令/组件，注意用于数据绑定的属性处理。

    范围：指令和组件 , 接口名称: OnInit

开发业务中我们经常在ngOnInit 做一些初始化的工作,而这些工作尽量要避免在constructor中进行,constructor 中应该只进行依赖注入而不是进行真正的业务操作

  1. ngDoCheck 在每个Angular变更检测周期中调用，用于变更的检测

    范围：指令和组件 接口名称：DoCheck

Angular的变更检测机制配合zone.js来实现，保证组件变化和页面变化同步，浏览器中任何异步事件都会触发检测机制 ， 检测模板所有绑定属性，若改变则相应区域会被更新。 需要注意的是：变更检测机制只会把组件属性的改变反应到模板上，不会改变组件值

  1. ngAfterContentInit 当把内容投影进组件之后调用。

    范围:组件 ， 接口：AfterContentInit

  2. ngAfterContentChecked 每次完成被投影组件内容的变更检测之后调用。

    范围：组件 ， 接口: AfterContentChecked

  3. ngAfterViewInit: 初始化完组件视图及其子视图之后调用

    范围：组件 ， 接口：AfterViewInit

  4. ngAfterViewChecked 每次做完组件视图喝子视图的变更检测之后调用

    范围：组件 ， 接口 ： AfterViewChecked

  5. ngOnDestroy 当Angular每次销毁指令/组件之前调用

    范围：指令和组件 ， 接口：OnDestroy

avatar
文章
阅读
粉丝