发布于 2年前

Angular Component组件的生命周期(一)

Angular Component组件的生命周期按时间次序可以分为以下阶段:

  1. 组件的生命周期是从Angular 实例化组件开始
  2. 接着渲染组件的视图以及子组件视图
  3. 完成组件视图渲染后,Angular仍然会检测组件的变化,主要包括
    1. 检测绑定属性的变化(change detect)
    2. 根据检测到的变化,如果有必要,则更新组件和它的子组件
  4. Component组件生命周期结束最终是销毁组件,以及从DOM中移除组件的模板

有些场景,我们需要在Component组件的某个阶段,如检测到属性变化,介入做一些处理。Angular提供了8个生命周期接口方法,允许我们可以对Component组件的运行做细粒度的控制。这些Component组件的生命周期方法,称之为lifecycle hook。

按调用顺序自上而下的hook方法:

<figure class="image"></figure>其中:ngAfterContentInit,ngAfterContentChecked,ngAfterViewInit和ngAfterViewChecked是组件对子组件视图或内容的变化检测调用。

constructor

Angular调用构造函数实例化Component组件。构造函数主要完成的是依赖注入,尽量保持它比较轻量,不要在这里写复杂或耗时的代码。

ngOnChanges

Angular检测到绑定属性变化会调用ngOnChanges方法。绑定属性指的是使用@Input标记的属性。

在以下两种情况下会被认为是绑定属性发生了变化:

  1. 对@Input标记的属性设置赋值
  2. 对@Input标记的属性重置值。

如果Component组件没有绑定Input属性,那么就不会调用ngOnChanges方法。

赋值绑定属性调用ngOnChanges

对于首次赋值给绑定的属性,Angular会在调用ngOnInit()之前调用ngOnChanges.

重置绑定属性的值调用ngOnChanges

需要特别注意理解什么是重置值。

这种情况不是重置:

let user:User = new User("张三");
user.name = “李四”;

这是对user的name进行修改,但没有对user重置值。

let user:User = new User("张三");
user = new User(“李四”);

这个表示重置user的值。

实现OnChanges接口

要在Angular检测到绑定属性变化调用ngOnChanges方法,需要实现OnChanges接口。

import { Component, EventEmitter, Input, OnChanges,SimpleChanges } from '@angular/core';
… 
@Component{
  selector: 'demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
}
export class DemoComponet implements OnChanges {
        ngOnChanges(changes: SimpleChanges): void {
    // do something
  }
}

SimpleChanges:变化内容的传递

ngOnChanges会接收SimpleChanges的参数,它实际是一个map。SimpleChanges定义如下

export declare interface SimpleChanges {
    [propName: string]: SimpleChange;
}

SimpleChange定义:

class SimpleChange {
  constructor(previousValue: any, currentValue: any)
  previousValue : any
  currentValue : any
  isFirstChange() : boolean
}
  • previousValue:表示发生变化之前的值
  • currentValue:变化后当前的值
  • isFirstChange:首次赋值,此值为true,后面重置值则时false。

当绑定属性的值发生变化,Angular会把变化的属性对应的SimpleChange传给ngOnChanges。对应Component组件绑定多个Input属性,changes参数只会传发生变化的值,没有变化的值不会传递。

示例:

ngOnChanges(changes: SimpleChanges) {
  for (let key in changes) {
    console.log(`${key} changed.
                  Current: ${changes[key].currentValue}.
                  Previous: ${changes[key].previousValue}`);
  }
}

ngOnInit

ngOnInit是在Component组件完成首次对@Input标记的属性赋值后调用,即首次调用ngOnChanges方法后,才会调用ngOnIit,并且只会调用一次。

好的编程习惯是把复杂的初始化工作放在构造函数constructor外,构造函数应该保持简单,只用来初始化一些本地变量。特别是需要通过调用远程服务来初始化数据,这些内容不应放在构造函数中。

Angular提供了OnInit接口,由它的接口方法ngOnInit来完成一些复杂的初始化工作。比如从远程服务中获取数据。

示例:

import { Component, EventEmitter, Input, OnInit } from '@angular/core';
… 
@Component{
  selector: 'demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
}
export class DemoComponet implements OnInit {
   ngOnInit(): void {
    // do something
  }
}
©2020 edoou.com   京ICP备16001874号-3