1. 程式人生 > >angualr4基礎之元件生命週期

angualr4基礎之元件生命週期

元件生命週期

//這個順序是按照執行的先後排列的
constructor:構造器函式,一般用於注入服務
ngOnChanges:檢測到輸入資料變化,首次觸發發生在ngOnInit前。注意物件的屬性發生變化時監聽不到
ngOnInit:元件初始化,通常會設定一些初始值
ngDoCheck:手動觸發更新檢查 
ngAfterContentInit:內容初始化到元件之後
ngAfterContentChecked:內容變更檢測之後
ngAfterViewInit:檢視 初始化之後
ngAfterViewChecked:檢視發生變化檢測之後,這個可以用來保證使用者檢視的及時更新
ngOnDestroy
:元件登出時的清理工作,通常用於移除事件監聽,退訂可觀察物件等
  • ngOnChanges
    • 在父元件初始化或修改子元件的輸入引數時呼叫。
<!--父元件-->
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
  greeting:string  = "Hello";//當這個物件變更時,會呼叫子元件的ngonchange鉤子
  user:{name:string} = {name: "Tom"};
 //當name變更時,不會呼叫子元件的ngonchange鉤子,因為他變更的是name屬性而不是user物件。
  constructor(){
}
}
<!--html-->
<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
>
//將值傳入子元件,當值改變時會呼叫子元件的ngonchange鉤子 </div>
  • 變更檢測 ngDoCheck (依賴於zone.js)
    • Default策略
    • OnPush策略
  • 所有的事件都會觸發變更檢測機制,不分原生還是自己寫的
  • 所有帶有check字樣的鉤子都會這樣,只要有一點變動就會呼叫。除非這個元件被銷燬。(在兩個input框之間切換都回呼叫)
//跟上邊的程式碼一樣,但是當name改變時,也會呼叫ngDoCheck方法鉤子。
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(): void {//子元件裡的變更檢測,
    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) {
      this.noChangeCount = 0;
    }else{
      this.noChangeCount = this.noChangeCount + 1;
      console.log("DoCheck:user.name沒變化時ngDoCheck方法已經被呼叫"+this.noChangeCount+"次")
    }
    this.changeDetected = false;
  }
}
  • View鉤子
    • 在父元件裡可以通過@ViewChild獲得子元件的引用。呼叫子元件方法
<!--父元件-->
import {Component, OnInit, ViewChild, AfterViewInit, AfterViewChecked} from "@angular/core";
import {ChildComponent} from "./child/child.component";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit,
  @ViewChild("child1")//引入子元件
  child1:ChildComponent;//定義子元件物件
  message:string;
  constructor(){
  }
  ngAfterViewInit(): void {//要想執行這個,必須等子元件全部載入完畢。
    console.log("父元件的檢視初始化完畢");
  //在ngAfterViewInit裡邊不能寫賦值等操作,要想進行這些操作必須寫在settimeout裡邊
    setTimeout(() => {   
      this.message = "Hello";
    },0);
  }
  ngAfterViewChecked(): void {
    console.log("父元件的檢視變更檢測完畢");
  }
  ngOnInit(): void {
    setInterval(() => {
      this.child1.greeting("Tom");//呼叫子元件裡的方法
    }, 5000);
  }
<!--子元件-->
import {Component, OnInit, AfterViewChecked, AfterViewInit} from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, AfterViewInit,
  AfterViewChecked {
  ngAfterViewInit(): void {
    console.log("子元件的檢視初始化完畢");
  }
  ngAfterViewChecked(): void {
    console.log("子元件的檢視變更檢測完畢");
  }
  constructor() { }
  ngOnInit() {
  }
  greeting(name:string) {
    console.log("hello "+name);
  }
}
  • ngConent指令
  • ngConent指令用於子元件,可以將父元件的內容投影到子元件
<!--父元件-->
<app-child>
<div class="header">這是頭部,這個div是父元件投影到子元件的</div
<div class="footer">這是底部,這個div是父元件投影到子元件的</div>
</app-child>
<!--子元件-->
<ng-content select=".header"></ng-content>
<ng-content select=".footer"></ng-content>
  • AfterContentInit,
    AfterContentChecked, AfterViewInit
父元件
//在這裡邊可以對屬性內容進行變更
ngAfterContentInit(): void {
    console.log("父元件投影內容初始化完畢");//1
    this.message = "hello world";
  }

  ngAfterContentChecked(): void {
    console.log("父元件投影內容變更檢測完畢");//2
  }

  ngAfterViewInit(): void {
    console.log("父元件檢視內容初始化完畢");//5
  }
  子元件
  ngAfterContentInit(): void {
    console.log("子元件投影內容初始化完畢");//3
    this.message = "hello world";
  }

  ngAfterContentChecked(): void {
    console.log("子元件投影內容變更檢測完畢");//4
  }
  • 銷燬ngOnDestroy
  • 在路由跳轉時會執行的鉤子。銷燬之前的元件。