元件

自從採用元件化的React大火之後，目前市面上炙手可熱的框架全都採用了元件化的理念，Angular當然也不能落後了。可以說，元件化是Angular的核心理念。按Angular在中國的佈道者大漠窮秋的話來說，就是：

Angular的核心概念是元件，模組化機制NgModule是為元件化服務的，實際上所有其它機制都是圍繞元件化而來的。只有從元件化這個角度才能把握Angular的精神核心。

元件通常都是由模版和業務邏輯組成，看一下如何用Angular寫一個很簡單的元件：

// hello.component.ts

import { Component } from '@angular/core';

@Component({              
    selector: 'hello',
    template: '<p> {{greeting}} </p>',
    styles: [`p { color: red;}`]
})
export class HelloComponent{
    private greeting: string;
    constructor(){
        this.greeting = 'Hello, Angular2!';
    }
}

// 使用
<hello></hello>

// 渲染結果
<hello>
    <p> Hello, Angular2! </p> 
</hello>
 

定義類HelloComponent的時候，加上裝飾器@Component（Typescript語法），告訴Angular這個類是元件類。裡面的資料稱之為元資料（metadata），selector屬性說明了該元件對外的使用標記，template就是元件的模版，styles是元件的樣式。而HelloComponent中定義的就是該元件的業務邏輯了。

如果模版內容太多，可以單獨寫在一個html檔案中，用templateUrl屬性引入；同理，樣式檔案用styleUrls引入。

元件生命週期

正如其他框架的元件，Angular的元件也是有生命週期這個概念。在不同的階段不同的場景下，可以呼叫不同的生命週期函式鉤子（hook）。

• constructor：構造器函式，一般用於注入服務
• ngOnChanges：檢測到輸入資料變化，首次觸發發生在ngOnInit前。注意物件的屬性發生變化時監聽不到
• ngOnInit：元件初始化，通常會設定一些初始值
• ngDoCheck：手動觸發更新檢查
  
  • ngAfterContentInit：內容初始化到元件之後
  • ngAfterContentChecked：內容變更檢測之後
  • ngAfterViewInit：檢視 初始化之後
  • ngAfterViewChecked：檢視發生變化檢測之後，這個可以用來保證使用者檢視的及時更新
• ngOnDestroy：元件登出時的清理工作，通常用於移除事件監聽，退訂可觀察物件等