本文介紹了Angular中的生命周期鉤子的理解,分享給大家,希望對大家有所幫助
什么是生命周期鉤子
簡單點來說生命周期鉤子就是Angular中一個組件從被創建當銷毀期間的一些有意義的關鍵時刻.這些關鍵時刻在Angular中被Angular核心模塊 @angular/core 暴露出來,賦予了我們在它們發生時采取行動的能力.
有哪些生命周期鉤子
Angular中從一個組件的創建到銷毀一個有八個生命周期鉤子它們,按照先后順序.它們分別是:
其中: ngOnInit() 、 ngAfterContentInit() 、 ngAfterViewInit() 和 ngOnDestroy() 在一個組件的生命周期中只會被調用一次,其它的都有可能會被多次調用.下面,就讓我們來詳細解列一下這些生命周期鉤子.
ngOnChanges()
當Angular(重新)設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的SimpleChanges對象 當被綁定的輸入屬性的值發生變化時調用,首次調用一定會發生在ngOnInit()之前。ngOnChanges() 生命周期的調用與一個組件中的輸入屬性有關.
當在一個組件中使用 @Input() 定義了一個輸入屬性時.只要這個輸入屬性的值發生了改變.就會觸發 ngOnChanges() 生命周期鉤子.這個生命周期鉤子被調用時會傳入一個 SimpleChanges 對象,這個對象中包含了輸入屬性當前值和上一值.
@Input()public name: string;ngOnChanges(changes: SimpleChanges): void { console.log(changes); // name:SimpleChange {previousValue: "a", currentValue: "ab", firstChange: false}}上面是我定義了一個輸入屬性 name 并將從 a 它改為 ab 之后的打印結果,可能你還注意到了打印的結果中還有一個 firstChange 屬性.它是一個Booleans,表明你是否是第一次改變.
同時,還有一點需要注意:你的輸入屬性定義為你引用類型和基本類型的時候其表現結果是不同的.當你的輸入屬性是基本類型時.你的每一次改變都會觸發 ngOnChanges() 生命周期鉤子,而當你的輸入屬性是引用類型時,你改變你引用類型 當中 的屬性時,并不會觸發 ngOnChanges() 生命周期鉤子.只有當你將你引用類型數據的指針指向另一塊內存地址的時候才會觸發 ngOnChanges() 生命周期鉤子.
ngOnInit()
在Angular第一次顯示數據綁定和設置指令/組件的輸入屬性之后,初始化指令/組件。 在第一輪ngOnChanges()完成之后調用,只調用一次。ngOnInit() 是一個組件的生命周期中一定存在的一個鉤子.它在一個組件被初始化的時候被調用.在這個期間,你可以執行一些相應的數據綁定操作.
ngDoCheck()
檢測,并在發生Angular無法或不愿意自己檢測的變化時作出反應。 在每個Angular變更檢測周期中調用,ngOnChanges()和ngOnInit()之后。新聞熱點
疑難解答
圖片精選