Angular4 组件生命周期钩子

1.组件生命周期调用顺序

import { Component, OnInit, OnChanges, DoCheck, AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, SimpleChanges, Input } from '@angular/core'; let logIndex:number=1;  //计数器@Component({  selector: 'app-life',  templateUrl: './life.component.html',  styleUrls: ['./life.component.css']})export class LifeComponent implements OnInit,OnChanges,DoCheck,AfterContentChecked,AfterContentInit,AfterViewChecked,AfterViewInit {  @Input() name:string;  logIt(msg:string){   console.log(`#${logIndex++}  ${msg}`);  }   ngAfterViewInit(): void {    this.logIt("name属性在ngAfterViewInit里面的值是"+name);   }  ngAfterViewChecked(): void {    this.logIt("name属性在ngAfterViewChecked里面的值是"+name);   }  ngAfterContentInit(): void {    this.logIt("name属性在ngAfterContentInit里面的值是"+name);   }  ngAfterContentChecked(): void {    this.logIt("name属性在ngAfterContentChecked里面的值是"+name);   }  ngDoCheck(): void {    this.logIt("name属性在ngDoCheck里面的值是"+name);    }  ngOnChanges(changes: SimpleChanges): void {    //changes,输入属性的所有变化的值    let name=changes['name'].currentValue;    this.logIt("name属性在ngOnChanges里面的值是"+name);  }  constructor() {     this.logIt("name属性在constructor里面的值是"+name);  }  ngOnInit() {    this.logIt("name属性在ngOnInit里面的值是"+name);  }}

运行结果

#1  name属性在constructor里面的值是
#2  name属性在ngOnChanges里面的值是Tom1，父组件修改或初始化子组件的输入属性是被调用，一个组件没有输入属性，就永远不会调用，首次调用发上在ngOnInit之前，且是多次调用
#3  name属性在ngOnInit里面的值是，初始化值一定要写在ngOinit中
#4  name属性在ngDoCheck里面的值是
#5  name属性在ngAfterContentInit里面的值是
#6  name属性在ngAfterContentChecked里面的值是
#7  name属性在ngAfterViewInit里面的值是
#8  name属性在ngAfterViewChecked里面的值是
#9  name属性在ngDoCheck里面的值是
#10  name属性在ngAfterContentChecked里面的值是
#11  name属性在ngAfterViewChecked里面的值是

2.ngOnChanges钩子

（1）可变对象：对象

（2）不可变对象：字符串

 constructor(){    //不可变对象：字符串    var greeting="hello";    greeting="hello world";    //（1）当字符串在内存中被创建出来以后，他的值永远不会被改变    //（2）内存中有两个字符串，且每个字符串的值是不可变的    //（3）对于greeting变量来说他的值是改变的，它的值从第一个字符串的地址变成了第二个字符串的地址    //可变对象：对象，当一个对象被创建时，哪怕属性的值变化了，他还是保存在固定的内存地址    var user={name:'tom'};    user.name='jeery';    //当user对象被创建的时候，user的name属性指向了被创建的'tom'字符串的地址，后来改变了user对象的name属性指向的'jeery'的地址    //user对象的内存地址并没有改变  }

（1）子组件

export class ChildComponent implements OnInit,OnChanges {  ngOnChanges(changes: SimpleChanges): void {     console.log(JSON.stringify(changes,null,2));  }  constructor() { }  @Input() greeting:string;  @Input() user:{name:string};  message:string="初始化消息"  ngOnInit() {  }}

模板

<div class="child"><p>我是子组件</p><p> 问候语：{{greeting}}</p><p> 姓名：{{user.name}}</p><p> 消息：<input [(ngModel)]="message"/></p></div>

（2）父组件传入并修改子组件的输入属性

export class AppComponent {  greeting:string="Hello";  user:{name:string}={name:'tom'};    constructor(){      }}

模板：

<div class="parent"><p>问候语：<input [(ngModel)]="greeting" /></p><p>姓名：<input [(ngModel)]="user.name"/></p></div><app-child [greeting]="greeting"  [user]="user"></app-child>

（3）

初始化结果

{
  "greeting": {
    "currentValue": "Hello",
    "firstChange": true
  },
  "user": {
    "currentValue": {
      "name": "tom"
    },
    "firstChange": true
  }
}

修改问候语：

{
  "greeting": {
    "previousValue": "Hello",
    "currentValue": "Hello1",
    "firstChange": false
  }
}

修改姓名：没有反应

修改消息也没有反应