<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [TOC] >[success] # 組件生命周期 下面圖片中 **黃色的部分的生命周期** 都是 **子組件的生命周期** ,**紅色的都是父組件的生命周期** ![](https://img.kancloud.cn/97/63/976364594c05539524d2b7a10ba043f5_1038x566.png) >[success] ## constructor 屬于angular類的構造函數,會第一個調用,**類似 created ,** 在這個構造那函數期間,dom還沒有渲染結束 >[success] ## ngOnInit **ngOnInit** 跟 **mounted** 有點像,組件初始化時候會被調用,使用時最好定義一下類中的 **方法約束** ,但是在這里還是會有一些組件沒有被完全渲染,要想完全渲染完成dom 推薦使用 **ngAfterViewInit** ![](https://img.kancloud.cn/1e/d5/1ed51fd3e2b3236cc53715d83cb8e395_858x864.png) >[success] ## ngOnChanges **ngOnChanges** 會 **監聽父組件傳入的值的變化 ,會返回一個對象,對象中每個 key 名就是父組件給子組件傳過來的屬性的名稱, value 也是一個對象鍵值對,value中有 newVal 與 oldVal** ,如圖: 父組件傳值時子組件上的屬性 ![](https://img.kancloud.cn/2d/f9/2df9e4c2243c4dd31e5689666596e7c9_510x307.png) 在子組件內使用 **ngOnChanges** 監聽時就會監聽到這些屬性 ![](https://img.kancloud.cn/1e/0a/1e0a77bae20838eb7f8ffd6ed3e28227_1112x110.png) 這是一個值 前后的變化 ![](https://img.kancloud.cn/02/22/0222a877c304f9305b346e8c62a75d77_681x136.png) >[success] ## ngDoCheck **angular** 中規定,不允許 **ngDoCheck** 跟 **ngOnChanges** 同時使用,因為在某種角度,它倆要實現的功能是一樣的,只不過是 **ngOnChanges** 只關心組件傳入的值的變化,而 **ngDoCheck** 是關心所有屬性的變化,用來做 **臟值檢測** ,有點像 **vue** 中的 **watch** >[success] ## ngAfterContentInit 內容投影(vue中的插槽)完成調用時就會觸發這個鉤子 子組件寫法: ![](https://img.kancloud.cn/9b/2c/9b2ccbaa6f5ddcb2247cc6935f712081_1062x621.png) 父組件寫法: ![](https://img.kancloud.cn/89/b5/89b5cf1da73f23bde54cc8009811d4dd_838x352.png) >[success] ## ngAfterContentChecked 組件內容臟值檢測,大概意思是監聽組件的所有屬性把 >[success] ## ngAfterViewInit 意思是 **一個組件跟它的所有子組件都初始化完成了**,就跟vue的mounted一樣 >[success] ## ngAfterViewChecked 組件視圖臟值檢測 >[success] ## ngOnDestroy 組件銷毀時,或者路由發生變化時觸發,例如 **ng-if 時就會觸發** ,一般用在 **清理定時器時候使用** >[success] ## 使用生命周期的代碼 ~~~ import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core'; // 聲明菜單接口 export interface TopMenu { title: string; link: string; } @Component({ selector: 'app-scrollable-tab', templateUrl: './scrollable-tab.component.html', styleUrls: ['./scrollable-tab.component.css'] }) export class ScrollableTabComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy { selectedIndex = -1; // 高亮選中的顏色下標 @Input() menus: TopMenu[] = []; // 菜單列表 @Input() backgroundColor = '#fff'; // 背景顏色 @Input() titleColor = 'blue'; // 標題顏色 @Input() titleActiveColor = 'yellow'; // 標題選中顏色 @Input() indicatorColor = 'brown'; // @Output() tabSelected = new EventEmitter(); // 定義要回傳得數據 /** * 組件構造調用 */ constructor() { console.log('組件構造調用'); } /** * 組件初始化 */ ngOnInit(): void { console.log('組件初始化'); } /** * 監聽組件變化 */ ngOnChanges(changes: SimpleChanges): void { console.log('組件輸入屬性改變', changes); } /** * 臟值檢測 */ ngDoCheck(): void { // console.log('臟值檢測'); } /** * 組件內容初始化 */ ngAfterContentInit(): void { console.log('組件內容初始化'); } /** * 組件內容臟值檢測 */ ngAfterContentChecked(): void { console.log('組件內容臟值檢測'); } /** * 組件視圖初始化 */ ngAfterViewInit(): void { console.log('組件視圖初始化'); } /** * 組件視圖臟值檢測 */ ngAfterViewChecked(): void { console.log('組件視圖臟值檢測'); } /** * 組件銷毀 */ ngOnDestroy(): void { console.log('組件銷毀'); } handleSelection(index: number) { this.selectedIndex = index; // 子傳父 this.tabSelected.emit(this.menus[this.selectedIndex]); } } ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看