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
  }
}

修改姓名：没有反应

修改消息也没有反应