[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]);
}
}
~~~
- Angular8開發拼多多WebApp
- 框架對比
- 環境搭建與項目創建
- 開發工具配置
- 初始組件
- ngFor指令
- ngIf指令
- 樣式綁定的幾種方式
- 組件生命周期
- 在組件類中引用模版(類似vue 的 ref)
- 雙向綁定
- 什么是模塊
- 【以下目錄未完成】什么是注解(裝飾器)
- 指令的概念
- 組件的事件綁定和樣式綁定
- 組件嵌套和投影組件
- 路由概念
- 路由實戰
- 路由URL和參數
- 管道的概念
- 依賴注入
- 臟值檢測
- HTTP 概覽
- Postman 和 Rest Client 調試 HTTP
- Rest API
- HttpClient 修改
- Http 攔截器 HttpInterceptor
- 其他
- Angular終極課程
- RxJS快速入門