[TOC] >[success] # 組件生命周期 下面圖片中 **黃色的部分的生命周期** 都是 **子組件的生命周期** ，**紅色的都是父組件的生命周期**  >[success] ## constructor 屬于angular類的構造函數，會第一個調用，**類似 created ,** 在這個構造那函數期間，dom還沒有渲染結束 >[success] ## ngOnInit **ngOnInit** 跟 **mounted** 有點像，組件初始化時候會被調用，使用時最好定義一下類中的 **方法約束** ，但是在這里還是會有一些組件沒有被完全渲染，要想完全渲染完成dom 推薦使用 **ngAfterViewInit**  >[success] ## ngOnChanges **ngOnChanges** 會 **監聽父組件傳入的值的變化 ，會返回一個對象，對象中每個 key 名就是父組件給子組件傳過來的屬性的名稱， value 也是一個對象鍵值對，value中有 newVal 與 oldVal** ，如圖： 父組件傳值時子組件上的屬性  在子組件內使用 **ngOnChanges** 監聽時就會監聽到這些屬性  這是一個值 前后的變化  >[success] ## ngDoCheck **angular** 中規定，不允許 **ngDoCheck** 跟 **ngOnChanges** 同時使用，因為在某種角度，它倆要實現的功能是一樣的，只不過是 **ngOnChanges** 只關心組件傳入的值的變化，而 **ngDoCheck** 是關心所有屬性的變化，用來做 **臟值檢測** ，有點像 **vue** 中的 **watch** >[success] ## ngAfterContentInit 內容投影（vue中的插槽）完成調用時就會觸發這個鉤子 子組件寫法：  父組件寫法：  >[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]); } } ~~~