資訊專欄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)一組件化標準方式，提出Web Component的標準。
每個組件包含自己的html、css、js代碼。
Web Component標準包括以下四個重要的概念：
Custom Elements（自定義標簽）：可以創(chuàng)建自定義 HTML 標記和元素；
HTML Templates（HTML模版）：使用 標簽去預定義一些內(nèi)容，但并不加載至頁面，而是使用 JS 代碼去初始化它；
Shadow DOM（虛擬DOM）：可以創(chuàng)建完全獨立與其他元素的DOM子樹；
HTML Imports（HTML導入）：一種在 HTML 文檔中引入其他 HTML 文檔的方法，。
概括來說就是，可以創(chuàng)建自定義標簽來引入組件是前端組件化的基礎(chǔ)，在頁面引用 HTML 文件和 HTML 模板是用于支撐編寫組件視圖和組件資源管理，而 Shadow DOM 則是隔離組件間代碼的沖突和影響。
示例定義hello-component
Hello Web Component!
使用hello-component
Web Component
從以上代碼可看到，hello.html 為按標準定義的組件（名稱為 hello-component ），在這個組件中有自己的結(jié)構(gòu)、樣式及邏輯，然后在 index.html 中引入該組件文件，即可像普通標簽一樣使用。
Angular ComponentAngular Component屬于指令的一種，可以理解為擁有模板的指令。其它兩種是屬性型指令和結(jié)構(gòu)型指令。
基本組成@Component({
selector: "demo-component",
template: "Demo Component"
})
export class DemoComponent {}
組件裝飾器：每個組件類必須用@component進行裝飾才能成為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] | 自定義組件的插值標記，默認是雙大括號{{}} |
| 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）可用的服務 |
| 名稱 | 類型 | 作用 |
|---|---|---|
| exportAs | string | 設(shè)置組件實例在模板中的別名，使得可以在模板中調(diào)用 |
| host | {[key: string]: string} | 設(shè)置組件的事件、動作和屬性等 |
| inputs | string[] | 設(shè)置組件的輸入屬性 |
| outputs | string[] | 設(shè)置組件的輸出屬性 |
| providers | Provider[] | 設(shè)置組件及其所有子組件（含ContentChildren）可用的服務（依賴注入） |
| queries | {[key: string]: any} | 設(shè)置需要被注入到組件的查詢 |
| selector | string | 設(shè)置用于在模板中識別該組件的css選擇器（組件的自定義標簽） |
以下幾種元數(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ā)生變化，當這個值為引用類型（Object，Array等）時，則只對比該值的引用。
顯然，OnPush策略相比Default降低了變化監(jiān)測的復雜度，很好地提升了變化監(jiān)測的性能。如果組件的更新只依賴輸入屬性的值，那么在該組件上使用OnPush策略是一個很好的選擇。
encapsulationViewEncapsulation.None：無 Shadow DOM，并且也無樣式包裝。
ViewEncapsulation.Emulated：無 Shadow DOM，但是通過Angular提供的樣式包裝機制來模擬組件的獨立性，使得組件的樣式不受外部影響，這是Angular的默認設(shè)置。
ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。
生命周期當Angular使用構(gòu)造函數(shù)新建組件后，就會按下面的順序在特定時刻調(diào)用這些生命周期鉤子方法：
| 生命周期鉤子 | 調(diào)用時機 |
|---|---|
| ngOnChanges | 在ngOnInit之前調(diào)用，或者當組件輸入數(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ā)。此時應將不會被垃圾回收器自動回收的資源（比如已訂閱的觀察者事件、綁定過的DOM事件、通過setTimeout或setInterval設(shè)置過的計時器等等）手動銷毀掉。 |
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93643.html
摘要：別著急，的開發(fā)團隊已經(jīng)考慮到了這個問題，上述的檢測機制只是一種默認的檢測機制，還提供一種的檢測機制設(shè)置元數(shù)據(jù)屬性。 什么是變化監(jiān)測 在使用 Angular 進行開發(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...
摘要：在應用開發(fā)中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。父組件綁定到這個事件屬性，并在事件發(fā)生時作出回應。然后通過的元數(shù)據(jù)數(shù)組提供服務的實例，并通過構(gòu)造函數(shù)分別注入到父子組件中。 在Angular應用開發(fā)中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。 根據(jù)數(shù)據(jù)的傳遞方向，...
摘要：他們即不是指令，也不應該使用組件代替指令，除非你正在用控制器升級模板指令，組件還包含數(shù)據(jù)事件的輸入與輸出，生命周期鉤子和使用單向數(shù)據(jù)流以及從父組件上獲取數(shù)據(jù)的事件對象。 showImg(https://segmentfault.com/img/bVynsJ); 關(guān)鍵詞 架構(gòu), 文件結(jié)構(gòu), 組件, 單向數(shù)據(jù)流以及最佳實踐 來自 @toddmotto 團隊的編碼指南 Angular 的編碼...
摘要：你是一個對感興趣的開發(fā)者嗎不用擔心，這真的不會讓你成為一個背叛者或其他什么，真的。事實上，這個想法并不是或獨創(chuàng)的它只是一種很棒的軟件開發(fā)實踐方式。把代碼分離到不同的文件里并不會自動導致關(guān)注點分離。 原文鏈接 : Getting to Grips with React (as an Angular developer)原文作者 : DAVE CEDDIA譯者 : 李林璞（web前端領(lǐng)域）...
閱讀 678·2021-11-15 11:37
閱讀 4135·2021-09-09 09:34
閱讀 3573·2019-08-30 15:52
閱讀 2613·2019-08-29 14:03
閱讀 2854·2019-08-26 13:36
閱讀 1597·2019-08-26 12:16
閱讀 1602·2019-08-26 11:45
閱讀 3494·2019-08-23 18:41
