详解Angular组件生命周期(一)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.CSS']
})
export class LifeComponent implements OnInit {

  constructor() { }

  nGonInit() {
  }

}

import { Component, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, Input, SimpleChange, SimpleChanges } 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, AfterContentInit
  , AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input()
  name: string;

  logit(msg: string) {
    console.log(`# ${logIndex++}  ${msg}`);
  }
  constructor() {
    this.logIt("name属性在constructor里的值是: " + this.name);
  }

  ngOnInit() {
    this.logIt("name属性在OnInit里的值是: " + this.name);
  }

  ngOnChanges(changes: SimpleChanges): void { // 传入一个SimpleChanges对象
    let name = changes['name'].currentValue;
    this.logIt("name属性在ngOnChanges里的值是: " + this.name);
  }

  ngDoCheck(): void {
    this.logIt("DoCheck");
  }

  ngAfterContentInit() {
    this.logIt("ngAfterContentInit");
  }

  ngAfterContentChecked() {
    this.logIt("ngAfterContentChecked");
  }

  ngAfterViewInit() {
    this.logIt("ngAfterViewInit");
  }

  ngAfterViewChecked() {
    this.logIt("ngAfterViewChecked");
  }
  ngOnDestroy() {
    this.logIt("ngOnDestory");
  }
}

//字符串是不可变的
var greeting = "Hello";
greeting = "Hello World";
//对象是可变的
var user = { name: "Tom" };
user.name = "Jerry";

<div class="parent">
    <h2>我是父组件</h2>
    <div>问候语：<input type="text" [(ngModel)]="greeting"></div>
    <div>
      姓名：
      <input type="text" [(ngModel)]="user.name">
    </div>
    <app-child [greeting]="greeting"  [(user)]="user"> </app-child>
</div>

import { Component, OnInit, Input, OnChanges, SimpleChanges, DoCheck } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges, DoCheck {

  @Input()
  greeting: string;

  @Input()
  user: { name: string };

  message: string = "初始化消息";
  oldUsername: string;
  changeDetected: boolean = false;
  noChangeCount: number = 0;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(JSON.stringify(changes, null, 2));
  }

  ngDoCheck() {
    if (this.user.name !== this.oldUsername) {
      this.changeDetected = true;
      console.log("DoCheck: user.name 从 " + this.oldUsername + "变为" + this.user.name);
      this.oldUsername = this.user.name;
    }
    if (this.changeDetected) {//变化来计数器清0
      this.noChangeCount = 0;
    } else {//没变化
      this.noChangeCount++;
      console.log("DoCheck:user.name没变化时ngDoCheck方法已经被调用" + this.noChangeCount + "次")
    }
    this.changeDetected = false;//最后不管变没变标志位复位
  }

}