組件是構(gòu)成angular2應(yīng)用的基本單元，angular應(yīng)用就是由一棵組件樹(shù)組成的。我們可以在組件的模板內(nèi)容中調(diào)用其他的組件，并可以向該組件傳遞值以及響應(yīng)該組件的事件（即組件的輸入輸出）。另外，組件繼承自指令（Directive），也就是說(shuō)組件其實(shí)是一種特殊的指令。

組件的實(shí)現(xiàn)

實(shí)現(xiàn)組件僅用實(shí)現(xiàn)一個(gè)類(lèi)（這里都是用TypeScript實(shí)現(xiàn)），并使用@Component修飾符修飾該類(lèi)，填寫(xiě)該修飾符必要的信息。
1.從angular核心包中引入Component修飾符
import { Component } from '@angular/core';
2.填寫(xiě)修飾符中的選項(xiàng)

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

selector:一個(gè)CSS選擇器，聲明后就能在其他模板或html中使用。
template:內(nèi)聯(lián)模板，如上。也能使用templateUrl，直接使用一個(gè)模板HTML文件

3.實(shí)現(xiàn)一個(gè)并導(dǎo)出一個(gè)類(lèi)
export class AppComponent { }
以上只實(shí)現(xiàn)一個(gè)空類(lèi)，并聲明export。這樣才能在模塊中引入，被其他組件使用，或作為根組件。

完整代碼（該組件沒(méi)有任何實(shí)際作用，僅顯示了一個(gè)標(biāo)題）：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

修飾器中的選項(xiàng)

若需要組件實(shí)現(xiàn)一些更強(qiáng)大的功能，則需要對(duì)組件的一些選項(xiàng)進(jìn)行聲明，下面介紹一些目前接觸到的選項(xiàng)，以后慢慢補(bǔ)充。

//sub component
import { Component, EventEmitter } from '@angular/core';

@Component({
  selector: 'sub-app',
  template: '<h2 (click)="hasclick()">{{ massage }}</h2>',
  inputs: ['massage'],
  outputs: ['outputText'],
  styles:[`
    h2{color:red}
  `],
})
export class SubComponent { 
    massage: string;
    outputText = new EventEmitter<string>();

    hasclick(){
        this.outputText.emit("massage been clicked");
    }
}

//跟組件
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <h1>My First Angular App</h1>
  <sub-app massage="sub component" (outputText)="alert($event);"></sub-app>
  `
})
export class AppComponent { 
    alert(str: string){
        alert(str);
    }
}

以上代碼定義了一個(gè)SubComponent類(lèi)，該類(lèi)接受一個(gè)message輸入，并有個(gè)outputText的事件輸出：

1.selector：用來(lái)標(biāo)識(shí)組件的css選擇器，建議加上自己的前綴，避免重復(fù)
2.inputs:屬性名列表，用來(lái)綁定組件需要的輸入。 。massage為該組件的一個(gè)屬性，聲明為一個(gè)輸入inputs: ['massage']，這樣在A(yíng)ppComponent組件中就能給message傳遞值?？梢允褂聾Input修飾符來(lái)起到相同的效果，@Input('alias') property: type，alias為property的別名，給屬性傳入值時(shí)可以使用給別名。
3.outputs:屬性名列表，暴露該組件包含的事件。angular應(yīng)用是一棵組件樹(shù)，inputs聲明由父組件向子組件需要傳遞的信息，outputs則聲明子組件向父組件傳遞的信息，該信息通過(guò)事件來(lái)。輸出屬性必須是一個(gè)EventEmitter類(lèi)的實(shí)例，該實(shí)例通過(guò)調(diào)用emit方法來(lái)發(fā)出事件,代碼為this.outputText.emit("massage been clicked");,則上面例子在標(biāo)題在點(diǎn)擊后將發(fā)出一個(gè)事件，父組件通過(guò)聲明的屬性(outputText)="alert($event);"進(jìn)行監(jiān)聽(tīng)，$event為emit發(fā)出的信息。同樣也能使用@Output修飾符實(shí)現(xiàn)。
4.template/templateUrl:內(nèi)聯(lián)的HTML內(nèi)容，或通過(guò)HTML模板引入
5.styles/styleUrls:樣式數(shù)組，可以使用styles寫(xiě)內(nèi)聯(lián)樣式，或使用stylesUrl引入樣式文件。注意styles/styleUrls由數(shù)組組成，通常包含一個(gè)string就夠了。

styles:[`
    h2{color:red}
`],

6.provides：注冊(cè)服務(wù)提供商，通常用來(lái)聲明組件中要使用的服務(wù)，這是angular依賴(lài)注入器所需要的配置。也可以中模塊中聲明，這樣該模塊中所有的組件都能使用。
7.animations：組件使用到的動(dòng)畫(huà)

聲明組件中的其他一些選項(xiàng)

API中聲名的其他一些選項(xiàng)，還沒(méi)有實(shí)際用到，有些看英文還好理解些：

1.changeDetection:組件用到的變更檢測(cè)策略，不填則采用的默認(rèn)策略，在組件輸入有變更或有事件觸發(fā)時(shí)，會(huì)調(diào)用變更檢測(cè)?？梢月暶鳛橐环Nonpush策略，這里不介紹。
2.entryComponents:被動(dòng)態(tài)插入到給組件視圖中的組件列表
3.encapsulation：樣式封裝策略
4.host：宿主元素的樣式、類(lèi)的映射

  host: {
    'style': 'display: table; height: 100%; background-color: red',
    'class': 'myClass'
  }

5.exportAs：name under which the component instance is exported in a template，在用到表單部分是就會(huì)用到這個(gè)名字（ngModel,ngForm)。
6.interpolation：自定義的插值標(biāo)記
7.queries：configure queries that can be injected into the component
8.viewProviders：list of providers available to this component and its view children
9.moduleId：ES/CommonJS module id of the file in which this component is defined