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