zoukankan      html  css  js  c++  java
  • Angular生命周期理解

    Angular每个组件,包含根组件和每一级的子组件,都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力。

    在Angular中,提供了8个生命周期钩子函数:

    这8个生命周期钩子函数分为两类:第一类:指令与组件共有的钩子,第二类:只有组件才有的钩子

    1. ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。

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

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

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

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

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

    触发条件

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

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

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

    子组件的参数为输入属性且为不可变对象变化时 

    输入属性:@Input()属性

    不可变对象:原始值(undefined、null、布尔值、数字和字符串)

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

    可变对象

    var greeting = 'hello';

    greeting = 'hello world';

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

    不可变对象

    var user = {name:Tom};

    user.name = "Jerry";

    user的指向的内存地址并没有改变,改变的是user对象中的name属性

    ngOnChanges 钩子接收一个类型为 SimpleChange 的映射对象,包括新值和旧值

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

    ( 说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 )

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

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

    3.ngDoCheck : 在每个 Angular 变更检测周期中调用。用于变更的检测

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

    Angular的变更检测机制配合zone.js来实现,保证组件变化和页面变化同步,

    浏览器中任何异步事件都会触发检测机制,

    检测模版所有绑定属性,若改变则相应区域会被更新

    需要注意的是:变更检测机制只会把组件属性的改变反应到模版上,不会改变组件值

    Angular中,每个组件都有属于自己的变更检测器,当任何一个变更检测器检查到变化,zone.js会根据组件的变更检测策略来检查组件,以判断组件是否需要更新它的模版。

    检查策略: 

    1.default 

    默认情况下所有组件都使用Default策略;

    2.OnPush策略 

    如果所有组件都使用Default策略,不管变更发生在哪个组件上,zone.js会检测整个组件树,但会跳过使用OnPush策略的组件,OnPush策略的组件只有当其输入属性(即@Input)发生改变时,zone.js才会检测这个组件及其子组件。

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

    范围:组件,接口:AfterContentInit

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

    范围:组件,接口:AfterContentChecked

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

    范围:组件,接口:AfterViewInit

    7.ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。

    范围:组件,接口:AfterViewChecked

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

    范围:指令和组件,接口:OnDestroy

  • 相关阅读:
    17、静态链表
    16、约瑟夫问题
    15、循环链表
    9、插入排序
    14、企业链表
    13、单向链表
    12、顺序表的顺序存储结构
    11、归并排序
    10、快速排序
    原型模式
  • 原文地址:https://www.cnblogs.com/liquanjiang/p/10031971.html
Copyright © 2011-2022 走看看