資訊專欄INFORMATION COLUMN
摘要：組件元數據組件元數據等，下文將著重講解每個元數據的含義。建議此時獲取數據，不要在構造函數中獲取。每次變化監測發生時被調用。銷毀指令組件之前觸發。
Web Component
在介紹Angular Component之前，我們先簡單了解下W3C Web Components
定義W3C為統一組件化標準方式，提出Web Component的標準。
每個組件包含自己的html、css、js代碼。
Web Component標準包括以下四個重要的概念：
Custom Elements（自定義標簽）：可以創建自定義 HTML 標記和元素；
HTML Templates（HTML模版）：使用 標簽去預定義一些內容，但并不加載至頁面，而是使用 JS 代碼去初始化它；
Shadow DOM（虛擬DOM）：可以創建完全獨立與其他元素的DOM子樹；
HTML Imports（HTML導入）：一種在 HTML 文檔中引入其他 HTML 文檔的方法，。
概括來說就是，可以創建自定義標簽來引入組件是前端組件化的基礎，在頁面引用 HTML 文件和 HTML 模板是用于支撐編寫組件視圖和組件資源管理，而 Shadow DOM 則是隔離組件間代碼的沖突和影響。
示例定義hello-component
Hello Web Component!
使用hello-component
Web Component
從以上代碼可看到，hello.html 為按標準定義的組件（名稱為 hello-component ），在這個組件中有自己的結構、樣式及邏輯，然后在 index.html 中引入該組件文件，即可像普通標簽一樣使用。
Angular ComponentAngular Component屬于指令的一種，可以理解為擁有模板的指令。其它兩種是屬性型指令和結構型指令。
基本組成@Component({
selector: "demo-component",
template: "Demo Component"
})
export class DemoComponent {}
組件裝飾器：每個組件類必須用@component進行裝飾才能成為Angular組件。
組件元數據：組件元數據：selector、template等，下文將著重講解每個元數據的含義。
組件類：組件實際上也是一個普通的類，組件的邏輯都在組件類里定義并實現。
組件模板：每個組件都會關聯一個模板，這個模板最終會渲染到頁面上，頁面上這個DOM元素就是此組件實例的宿主元素。
組件元數據 自身元數據屬性| 名稱 | 類型 | 作用 |
|---|---|---|
| animations | AnimationEntryMetadata[] | 設置組件的動畫 |
| changeDetection | ChangeDetectionStrategy | 設置組件的變化監測策略 |
| encapsulation | ViewEncapsulation | 設置組件的視圖包裝選項 |
| entryComponents | any[] | 設置將被動態插入到該組件視圖中的組件列表 |
| interpolation | [string, string] | 自定義組件的插值標記，默認是雙大括號{{}} |
| moduleId | string | 設置該組件在 ES/CommonJS 規范下的模塊id，它被用于解析模板樣式的相對路徑 |
| styleUrls | string[] | 設置組件引用的外部樣式文件 |
| styles | string[] | 設置組件使用的內聯樣式 |
| template | string | 設置組件的內聯模板 |
| templateUrl | string | 設置組件模板所在路徑 |
| viewProviders | Provider[] | 設置組件及其所有子組件（不含ContentChildren）可用的服務 |
| 名稱 | 類型 | 作用 |
|---|---|---|
| exportAs | string | 設置組件實例在模板中的別名，使得可以在模板中調用 |
| host | {[key: string]: string} | 設置組件的事件、動作和屬性等 |
| inputs | string[] | 設置組件的輸入屬性 |
| outputs | string[] | 設置組件的輸出屬性 |
| providers | Provider[] | 設置組件及其所有子組件（含ContentChildren）可用的服務（依賴注入） |
| queries | {[key: string]: any} | 設置需要被注入到組件的查詢 |
| selector | string | 設置用于在模板中識別該組件的css選擇器（組件的自定義標簽） |
以下幾種元數據的等價寫法會比元數據設置更簡潔易懂，所以一般推薦的是等價寫法。inputs
@Component({
selector: "demo-component",
inputs: ["param"]
})
export class DemoComponent {
param: any;
}
等價于：
@Component({
selector: "demo-component"
})
export class DemoComponent {
@Input() param: any;
}
outputs
@Component({
selector: "demo-component",
outputs: ["ready"]
})
export class DemoComponent {
ready = new eventEmitter();
}
等價于：
@Component({
selector: "demo-component"
})
export class DemoComponent {
@Output() ready = new eventEmitter();
}
host
@Component({
selector: "demo-component",
host: {
"(click)": "onClick($event.target)", // 事件
"role": "nav", // 屬性
"[class.pressed]": "isPressed", // 類
}
})
export class DemoComponent {
isPressed: boolean = true;
onClick(elem: HTMLElement) {
console.log(elem);
}
}
等價于：
@Component({
selector: "demo-component"
})
export class DemoComponent {
@HostBinding("attr.role") role = "nav";
@HostBinding("class.pressed") isPressed: boolean = true;
@HostListener("click", ["$event.target"])
onClick(elem: HTMLElement) {
console.log(elem);
}
}
queries - 視圖查詢
@Component({
selector: "demo-component",
template: `
Demo Component
`,
queries: {
theInput: new ViewChild("theInput")
}
})
export class DemoComponent {
theInput: ElementRef;
}
等價于：
@Component({
selector: "demo-component",
template: `
Demo Component
`
})
export class DemoComponent {
@ViewChild("theInput") theInput: ElementRef;
}
queries - 內容查詢
{{item}}
@Directive({
selector: "li"
})
export class ListItem {}
@Component({
selector: "my-list",
template: `
等價于：
@Component({
selector: "my-list",
template: `
styleUrls和styles允許同時指定。
優先級：模板內聯樣式 > styleUrls > styles。
建議：使用styleUrls引用外部樣式表文件，這樣代碼結構相比styles更清晰、更易于管理。同理，模板推薦使用templateUrl引用模板文件。
changeDetectionChangeDetectionStrategy.Default：組件的每次變化監測都會檢查其內部的所有數據（引用對象也會深度遍歷），以此得到前后的數據變化。
ChangeDetectionStrategy.OnPush：組件的變化監測只檢查輸入屬性（即@Input修飾的變量）的值是否發生變化，當這個值為引用類型（Object，Array等）時，則只對比該值的引用。
顯然，OnPush策略相比Default降低了變化監測的復雜度，很好地提升了變化監測的性能。如果組件的更新只依賴輸入屬性的值，那么在該組件上使用OnPush策略是一個很好的選擇。
encapsulationViewEncapsulation.None：無 Shadow DOM，并且也無樣式包裝。
ViewEncapsulation.Emulated：無 Shadow DOM，但是通過Angular提供的樣式包裝機制來模擬組件的獨立性，使得組件的樣式不受外部影響，這是Angular的默認設置。
ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。
生命周期當Angular使用構造函數新建組件后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法：
| 生命周期鉤子 | 調用時機 |
|---|---|
| ngOnChanges | 在ngOnInit之前調用，或者當組件輸入數據（通過@Input裝飾器顯式指定的那些變量）變化時調用。 |
| ngOnInit | 第一次ngOnChanges之后調用。建議此時獲取數據，不要在構造函數中獲取。 |
| ngDoCheck | 每次變化監測發生時被調用。 |
| ngAfterContentInit | 使用 |
| ngAfterContentChecked | ngAfterContentInit后被調用，或者每次變化監測發生時被調用（只適用組件）。 |
| ngAfterViewInit | 創建了組件的視圖及其子視圖之后被調用（只適用組件）。 |
| ngAfterViewChecked | ngAfterViewInit，或者每次子組件變化監測時被調用（只適用組件）。 |
| ngOnDestroy | 銷毀指令/組件之前觸發。此時應將不會被垃圾回收器自動回收的資源（比如已訂閱的觀察者事件、綁定過的DOM事件、通過setTimeout或setInterval設置過的計時器等等）手動銷毀掉。 |
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93643.html
摘要：別著急，的開發團隊已經考慮到了這個問題，上述的檢測機制只是一種默認的檢測機制，還提供一種的檢測機制設置元數據屬性。 什么是變化監測 在使用 Angular 進行開發中，我們常用到 Angular 中的綁定——模型到視圖的輸入綁定、視圖到模型的輸出綁定以及視圖與模型的雙向綁定。而這些綁定的值之所以能在視圖與模型之間保持同步，正是得益于Angular中的變化檢測。 簡單來說，變化檢測就是 ...
摘要：以下是關于中一些模塊的概要以及它們與這篇文章的關聯性這個模塊實現了我們在這篇文章中討論的關于的幾個回調函數，同時它還會初始化一個策略類，這個類會作為連接和的橋梁。 現在，Angular Elements 這個項目已經在社區引起一定程度的討論。這是顯而易見的，因為 Angular Elements 提供了很多開箱即用的、十分強大的功能： 通過使用原生的 HTML 語法來使用 Angul...
摘要：在應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。父組件綁定到這個事件屬性，并在事件發生時作出回應。然后通過的元數據數組提供服務的實例，并通過構造函數分別注入到父子組件中。 在Angular應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。 根據數據的傳遞方向，...
摘要：他們即不是指令，也不應該使用組件代替指令，除非你正在用控制器升級模板指令，組件還包含數據事件的輸入與輸出，生命周期鉤子和使用單向數據流以及從父組件上獲取數據的事件對象。 showImg(https://segmentfault.com/img/bVynsJ); 關鍵詞 架構, 文件結構, 組件, 單向數據流以及最佳實踐 來自 @toddmotto 團隊的編碼指南 Angular 的編碼...
摘要：你是一個對感興趣的開發者嗎不用擔心，這真的不會讓你成為一個背叛者或其他什么，真的。事實上，這個想法并不是或獨創的它只是一種很棒的軟件開發實踐方式。把代碼分離到不同的文件里并不會自動導致關注點分離。 原文鏈接 : Getting to Grips with React (as an Angular developer)原文作者 : DAVE CEDDIA譯者 : 李林璞（web前端領域）...
閱讀 674·2021-11-15 11:37
閱讀 4129·2021-09-09 09:34
閱讀 3571·2019-08-30 15:52
閱讀 2609·2019-08-29 14:03
閱讀 2851·2019-08-26 13:36
閱讀 1592·2019-08-26 12:16
閱讀 1600·2019-08-26 11:45
閱讀 3492·2019-08-23 18:41
