站長資訊網
        最全最豐富的資訊網站

        Angular學習之聊聊生命周期

        本篇文章帶大家繼續angular的學習,使用angular進行開發時,避免不了需要接觸生命周期,下面就來帶大家一起聊聊Angular中的生命周期,希望對大家有所幫助!

        Angular學習之聊聊生命周期

        接觸過 reactvue 開發的讀者應該對生命周期這個概念不陌生。我們在使用 angular 開發的過程中,是避免不了的。

        組件從開始建立到銷毀的過程中,會經歷過一系列的階段。這就是一個生命周期,這些階段對應著應用提供的 lifecycle hooks

        那么,在 angular 中,這些 hooks 都有哪些呢?了解它們,對你編寫程序應該在哪里編寫,很重要。【相關教程推薦:《angular教程》】

        angular 中,生命周期執行的順序如下:

        - constructor 【常用,不算鉤子函數,但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck   - ngAfterContentInit   - ngAfterContentChecked   - ngAfterViewInit【常用】   - ngAfterViewChecked - ngOnDestroy【常用】
        登錄后復制

        為了解說和驗證,我們用 angular-cli 生成一個 demo 項目。

        constructor

        es6 中的 class 初始化對象的時候,constructor 會立即被調用。

        class Person {   constructor(name) {     console.log('be called')     this.name = name;   } }  let jimmy = new Person('jimmy'); // be called
        登錄后復制

        angular 的組件本身就是導出一個類。當這個組件被 new 起來的時候,會獲取 constructor 中的預設的值。

        ngOnChanges

        當我們有外部參數更改的時候,我們就會執行 ngOnChanges,也就是說組件中有 @Input 所綁定的屬性值發生改變的時候調用。

        簡單說,父組件綁定子組件中的元素,會觸發這個鉤子函數,可以多次出發。這在下面的 ngOnInit 總會介紹。

        ngOnInit

        這個方法調用的時候,說明組件已經初始化成功。在第一次 ngOnChanges() 完成之后調用,且只調用一次。

        // app.component.ts export class AppComponent implements OnInit, OnChanges {    constructor() {     console.log('1. constructor')   }    ngOnChanges() {     console.log('2. ngOnChanges')   }    ngOnInit() {     console.log('3. ngOnInit')   } }
        登錄后復制

        打印的信息如下:

        Angular學習之聊聊生命周期

        咦?怎么沒有打印 ngOnChanges 中的鉤子函數信息呢?

        上面已經說過了,需要觸發條件 @Input 的屬性值改變的時候。我們來修改一下:

        <!-- app.component.html --> <div>   <app-demo></app-demo> </div>
        登錄后復制

        // app.component.ts // AppComponent 類中添加屬性 public count:number = 0;
        登錄后復制

        <!-- demo.component.html --> <h3>count: {{ count }}</h3>
        登錄后復制

        // demo.component.ts export class DemoComponent implements OnInit, OnChanges {    @Input()   public count: number;    constructor() {     console.log('1. demo constructor')   }    ngOnChanges() {     console.log('2. demo ngOnChanges')   }    ngOnInit() {     console.log('3. demo ngOnInit')   }  }
        登錄后復制

        Angular學習之聊聊生命周期

        當通過 @Input 將值傳遞給子組件 demo 的時候,就會觸發 demo 組件中的 ngOnChanges

        @Input 傳遞的屬性發生改變的時候,可以多次觸發 demo 組件中的 ngOnChanges 鉤子函數。

        <!-- app.component.html --> <div>   <app-demo [count]="count"></app-demo>    <button (click)="parentDemo()">parent button</button> </div>
        登錄后復制

        // app.component.ts parentDemo() {   this.count++; }
        登錄后復制

        Angular學習之聊聊生命周期

        ngDoCheck

        當發生變化檢測的時候,觸發該鉤子函數。

        這個鉤子函數,緊跟在每次執行變更檢測時候 ngOnChanges 和首次執行執行變更檢測時 ngOnInit 后面調用。

        // demo.component.ts  ngDoCheck() {   console.log('4. demo ngDoCheck') }
        登錄后復制

        Angular學習之聊聊生命周期

        這個鉤子函數調用得比較頻繁,使用成本比較高,謹慎使用。

        一般使用 ngOnChanges 來檢測變動,而不是 ngDoCheck

        ngAfterContentInit

        當把外部的內容投影到內部組件,第一次調用 ngDoCheck 之后調用 ngAfterContentInit,而且只調用一次。

        // demo.component.ts  ngAfterContentInit() {   console.log('5. demo ngAfterContentInit'); }
        登錄后復制

        Angular學習之聊聊生命周期

        ngAfterContentChecked

        ngAfterContentChecked 鉤子函數在每次 ngDoCheck 之后調用.

        // demo.component.ts  ngAfterContentChecked() {   console.log('5. demo ngAfterContentChecked'); }
        登錄后復制

        Angular學習之聊聊生命周期

        ngAfterViewInit

        視圖初始化完成調用此鉤子函數。在第一次 ngAfterContentChecked 之后調用,只調用一次。

        這個時候,獲取頁面的 DOM 節點比較合理

        // demo.compoent.ts  ngAfterViewInit() {   console.log('7. demo ngAfterViewInit'); }
        登錄后復制

        Angular學習之聊聊生命周期

        ngAfterViewChecked

        視圖檢測完成調用。在 ngAfterViewinit 后調用,和在每次 ngAfterContentChecked 之后調用,也就是在每次 ngDoCheck 之后調用。

        // demo.component.ts  ngAfterViewChecked() {   console.log('8. ngAfterViewChecked') }
        登錄后復制

        Angular學習之聊聊生命周期

        ngOnDestroy

        組件被銷毀時候進行的操作。

        在這個鉤子函數中,我們可以取消訂閱,取消定時操作等等。

        <!-- app.component.html --> <app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>  <button (click)="hideDemo()">hide demo component</button>
        登錄后復制

        // app.component.ts public showDemoComponent: boolean = true;  hideDemo() {   this.showDemoComponent = false }
        登錄后復制

        // demo.component.ts ngOnDestroy() {   console.log('9. demo ngOnDestroy') }
        登錄后復制

        Angular學習之聊聊生命周期

        PS: 不知道讀者有沒有發現,調用一次的鉤子函數都比較常用~

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产在线精品一区二区不卡麻豆 | 91精品日韩人妻无码久久不卡| 四虎影院国产精品| 亚洲国产精品自在线一区二区| 亚洲AV无码精品色午夜果冻不卡| 精品国产爽爽AV| 2020最新久久久视精品爱| 91探花福利精品国产自产在线| 亚洲国产人成精品| 精品午夜国产人人福利| 97精品国产自在现线免费观看| 99久久99这里只有免费费精品| 四虎成人精品无码| 亚洲国产成人久久精品99| 久久久WWW成人免费精品| 999精品色在线播放| 亚洲国产精品自在在线观看| 精品久久久久久久| 91精品美女在线| 8AV国产精品爽爽ⅴa在线观看| 97久久超碰成人精品网站| 国产成人精品无码播放| 亚洲国产成人一区二区精品区| 无码欧精品亚洲日韩一区夜夜嗨| 久久亚洲国产精品五月天婷| 久久国产精品偷99| 久久久久久久久久久免费精品| 精品久久久久久国产三级| 精品人妻伦一二三区久久| 精品人体无码一区二区三区| 久久国产精品二国产精品| 久久精品无码免费不卡| 欧美精品黑人粗大| 一本色道久久88—综合亚洲精品| 真实国产乱子伦精品视频| 中文字幕久精品免费视频| 无码精品黑人一区二区三区 | 国产成人亚洲综合无码精品| 国产成人精品免费视频大全麻豆 | 99久久久精品免费观看国产 | 国产精品丝袜一区二区三区|