Component是Directive的子類，它是一個(gè)裝飾器，用于把某個(gè)類標(biāo)記為Angular組件。下面本篇文章就來(lái)帶大家深入了解angular中的@Component裝飾器，希望對(duì)大家有所幫助。

一、 @Component 裝飾器

1.1 @Component 裝飾器的用途

聲明一個(gè)組件時(shí)，在組件類的之上要用@Component裝飾器來(lái)告知Angular這是一個(gè)組件?！鞠嚓P(guān)教程推薦：《angular教程》】

import { Component, OnInit } from '@angular/core';  @Component({   selector: 'app-product-alerts',   templateUrl: './product-alerts.component.html',   styleUrls: ['./product-alerts.component.css'] }) export class ProductAlertsComponent implements OnInit {    constructor() { }    ngOnInit() {   }  }

1.2 @Component 裝飾器的常用選項(xiàng)

@Component 裝飾器繼承于 Directive ，這個(gè)css選擇器用于在模板中標(biāo)記出該指令，并觸發(fā)該指令的實(shí)例化。

1.2.1 繼承自@Directive裝飾器的選項(xiàng)

1.2.2 @Component自己特有的選項(xiàng)

二、 selector 選擇器

可使用下列形式之一：

• element-name： 根據(jù)元素名選取
• [attribute]： 根據(jù)屬性名選取
• .class： 根據(jù)類名選取
• [attribute=value]： 根據(jù)屬性名和屬性值選取
• not(sub_selector)： 只有當(dāng)元素不匹配子選擇器 sub_selector 的時(shí)候才選取
• selector1, selector2： 無(wú)論 selector1 還是 selector2 匹配時(shí)都選取

2.1 element-name： 根據(jù)元素名選取

@Component({     selector: 'app-element',     template:  './element.component.html',     styleUrls: ['./element.component.css'] })

<app-element></app-element>

2.2 [attribute]： 根據(jù)屬性名選取

@Component({     selector: '[app-element]',     template:  './element.component.html',     styleUrls: ['./element.component.css'] })

<div app-element></div>

2.3 .class： 根據(jù)類名選取

@Component({     selector: '.app-element',     template:  './element.component.html',     styleUrls: ['./element.component.css'] })

<div class="app-element"></div>

三、 host: {[key:string]:string}

使用一組鍵-值對(duì)，把類的屬性映射到宿主元素的綁定（Property、Attribute 和事件）。
Angular 在變更檢測(cè)期間會(huì)自動(dòng)檢查宿主 Property 綁定。 如果綁定的值發(fā)生了變化，Angular 就會(huì)更新該指令的宿主元素。

• 當(dāng) key 是宿主元素的 Property 時(shí)，這個(gè) Property 值就會(huì)傳播到指定的 DOM 屬性。
• 當(dāng) key 是 DOM 中的靜態(tài) Attribute 時(shí)，這個(gè) Attribute 值就會(huì)傳播到宿主元素上指定的 Property 去。
• 注意屬性的值默認(rèn)為變量，如果直接使用屬性值，需要加字符串單引號(hào)或者雙引號(hào)，變量直接在組件里定義即可

對(duì)于事件處理：

• 它的 key 就是該指令想要監(jiān)聽(tīng)的 DOM 事件。 要想監(jiān)聽(tīng)全局事件，請(qǐng)把要監(jiān)聽(tīng)的目標(biāo)添加到事件名的前面。 這個(gè)目標(biāo)可以是 window、document 或 body。
• 它的 value 就是當(dāng)該事件發(fā)生時(shí)要執(zhí)行的語(yǔ)句。如果該語(yǔ)句返回 false，那么就會(huì)調(diào)用這個(gè) DOM 事件的 preventDefault 函數(shù)。 這個(gè)語(yǔ)句中可以引用局部變量 $event 來(lái)獲取事件數(shù)據(jù)。

3.1 attribute 和 property

• property：dom元素作為對(duì)象附加的內(nèi)容，例如childNodes、firstChild等
• attribute：HTML標(biāo)簽特性是dom節(jié)點(diǎn)自帶的屬性

異同：

• 部分屬性既屬于 property ，又屬于 attribute ，比如 id
• attribute 初始化后不會(huì)再改變； property 默認(rèn)值為初始值，會(huì)隨著 dom 更新

所以在 angular2 中雙向綁定實(shí)現(xiàn)是由 dom 的 property 實(shí)現(xiàn)的，所以指令綁定的是 property ，但是在某些情況下 dom 不存在某個(gè) property 比如 colspan，rowspan 等，這時(shí)想要綁定 html 標(biāo)簽特性需要用到 attr:

<table width="100%" border="10px solid">   <tr>     <th>Month</th>     <th>Savings</th>   </tr>   <tr>     <td [attr.colspan]=colnum>January</td>   </tr>   <tr>     <td [attr.colspan]=colnum>February</td>   </tr> </table>  let colnum:number = 2;

3.2 使用 host 綁定 class

@Component({     selector: '.app-element',     template:  './element.component.html',     styleUrls: ['./element.component.css'],     host: {         '[class.default-class]': 'useDefault'     },     encapsulation: ViewEncapsulation.None // 讓宿主元素也用上 element.component.css 樣式。否則，默認(rèn)膠囊封裝避免CSS污染。 }) export class AppElementComponent {   @Input() useDefault = true; }

<div class="app-element"></div>

3.3 使用 host 綁定 style

@Component({     selector: '.app-element',     template:  './element.component.html',     styleUrls: ['./element.component.css'],     host: {         '[style.background]': 'inputBackground'     } }) export class AppElementComponent {   @Input() inputBackground = 'red'; }

<div class="app-element"></div>

3.4 使用 host 綁定事件

@Component({     selector: '.app-element',     template:  './element.component.html',     styleUrls: ['./element.component.css'],     host: {         '(click)': 'onClick($event)'     } }) export class AppElementComponent {   public onClick($event) {     console.log($event);   } }

<div class="app-element"></div>

四、 encapsulation（封裝）

供模板和 CSS 樣式使用的樣式封裝策略。

4.1 Web Components

通過(guò)一種標(biāo)準(zhǔn)化的非侵入的方式封裝一個(gè)組件，每個(gè)組件能組織好它自身的 HTML 結(jié)構(gòu)、CSS 樣式、JavaScript 代碼，并且不會(huì)干擾頁(yè)面上的其他元素。

Web Components 由以下四種技術(shù)組成：

• Custom Elements: 自定義元素HTML
• Templates: HTML模板
• Shadow DOM: 影子DOMHTML
• Imports: HTML導(dǎo)入

4.2 Shadow DOM

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Shadow DOM</title>     <style type="text/css">         .shadowroot_son {             color: #f00;         }     </style> </head> <body> <p>我不在 Shadow Host內(nèi)</p> <div>Hello, world!</div> <script>  // 影子宿主（shadow host）  var shadowHost = document.querySelector('.shadowhost');  // 創(chuàng)建影子根（shadow root）  var shadowRoot = shadowHost.createShadowRoot();  // 影子根作為影子樹(shù)的第一個(gè)節(jié)點(diǎn)，其他的節(jié)點(diǎn)比如p節(jié)點(diǎn)都是它的子節(jié)點(diǎn)。  shadowRoot.innerHTML = '<p>我在 Shadow Host內(nèi)</p>'; </script> </body> <html>

4.3 ViewEncapsulation

ViewEncapsulation 允許設(shè)置三個(gè)可選的值：

• ViewEncapsulation.Emulated: 無(wú) Shadow DOM，但是通過(guò) Angular 提供的樣式包裝機(jī)制來(lái)封裝組件，使得組件的樣式不受外部影響。這是 Angular 的默認(rèn)設(shè)置。
• ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
• ViewEncapsulation.None: 無(wú) Shadow DOM，并且也無(wú)樣式包裝

4.3.1 ViewEncapsulation.None

import { Component, ViewEncapsulation } from '@angular/core';  @Component({   selector: 'my-app',   template: `     <h4>Welcome to Angular World</h4>     <p class="greet">Hello {{name}}</p>   `,   styles: [`     .greet {       background: #369;       color: white;     }   `],   encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom }) export class AppComponent {   name: string = 'Semlinker'; }

ViewEncapsulation.None 設(shè)置的結(jié)果是沒(méi)有 Shadow DOM，并且所有的樣式都應(yīng)用到整個(gè) document，換句話說(shuō)，組件的樣式會(huì)受外界影響，可能被覆蓋掉。

4.3.2 ViewEncapsulation.Emulated

import { Component, ViewEncapsulation } from '@angular/core';  @Component({   selector: 'my-app',   ...,   encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom }) export class AppComponent {   name: string = 'Semlinker'; }

ViewEncapsulation.Emulated 設(shè)置的結(jié)果是沒(méi)有 Shadow DOM，但是通過(guò) Angular 提供的樣式包裝機(jī)制來(lái)封裝組件，使得組件的樣式不受外部影響。雖然樣式仍然是應(yīng)用到整個(gè) document，但 Angular 為 .greet 類創(chuàng)建了一個(gè) [_ngcontent-cmy-0] 選擇器?？梢钥闯?，我們為組件定義的樣式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用來(lái)實(shí)現(xiàn)局部的樣式。

4.3.3 ViewEncapsulation.ShadowDom

import { Component, ViewEncapsulation } from '@angular/core';  @Component({   selector: 'my-app',   ...,   encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom }) export class AppComponent {   name: string = 'Semlinker'; }

ViewEncapsulation.ShadowDom 設(shè)置的結(jié)果是使用原生的 Shadow DOM 特性。Angular 會(huì)把組件按照瀏覽器支持的 Shadow DOM 形式渲染。