摘要：通過增加刪除元素改變布局的。譬如和控制元素顯示隱藏，或者改變元素行為的。譬如設(shè)計看過我之前介紹以手寫依賴注入的朋友應(yīng)該已經(jīng)對行為驅(qū)動多少有些了解了。她有，并且包含了至少一個和一個標(biāo)簽。，將左邊的事件傳遞給了右邊的表達(dá)式通常就是事件處理函數(shù)。

前集回顧

在上一章里我們講了如何為angular2搭建開發(fā)環(huán)境(還沒搭起來的趕緊去看哦)，并使之跑起來我們的第一個"My First Angular 2 App"。當(dāng)然也有不少朋友反映環(huán)境搭建似乎比較復(fù)雜，整整一篇教程，最后只簡單輸出了一句話！這里我要說一句，學(xué)習(xí)新知識的確有一個陣痛的過程，尤其像angular2這種框架，引入了大量以前"前端"并不關(guān)心(沒有需求)的技術(shù)棧，這使得對于之前沒有接觸過這些概念的朋友的學(xué)習(xí)曲線陡然飆升，相信不少人看了上一章里開篇時的那些名詞后已經(jīng)認(rèn)識到這一點(diǎn)了！本教程主打?qū)嶋H操作，但也不會完全忽略理論，我們邊做邊理解。今天就接著上一章的余溫，我們來寫一個簡單component。

本章源碼：component

本章使用angular2版本為：2.4.5, webpack版本為: 2.2.0

先來看看我們將要完成的效果圖：

(注意動畫的部分)非常簡單的一個component，有木有？那好，我們現(xiàn)在要做的就是為這樣一個component描述需求：

她要能接受一個object用來描述初始值，如：isChecked(是否選中)、 txt(顯示文本)

當(dāng)選中時，需要有橫線覆蓋文本；反之亦然

當(dāng)用戶點(diǎn)擊復(fù)選框時，需要向上廣播該事件，由父組件(調(diào)用方)決定點(diǎn)擊時該做什么。這里我們需要在父組件里改變component的isChecked狀態(tài)，并使component重繪

她必須是一個處理Unidirectional Data Flow(單向數(shù)據(jù)流)的component，意思是傳入?yún)?shù)必須不可變(Immutable)

注：第4步里，我們使用Unidirectional Data Flow模型來更新數(shù)據(jù)，并沒有涉及到任何Reactive Programming的知識點(diǎn)

為了完成以上需求，我們需要了解下面知識點(diǎn)

或者這么問，AngularJS里有directive；angular2里有component，他們是什么關(guān)系？該如何理解angular2里的component？原諒我這里就不再詳述AngularJS里的directive了，直接介紹component：

Component： 簡單說，就是帶template的directive，也是最常見的組件形式。譬如：上一章中，ts/app.ts里的AppComponent。

Structural directive： 通過增加/刪除DOM元素改變DOM布局的directive。譬如：NgFor和NgIf

Attribute directive： 控制DOM元素顯示/隱藏，或者改變元素行為的directive。譬如：NgStyle

看過我之前介紹以BDD手寫依賴注入(dependency injection)的朋友應(yīng)該已經(jīng)對"行為驅(qū)動"多少有些了解了。當(dāng)我們需要設(shè)計一個API或者組件時，最佳的方式就是先設(shè)計她的使用場景，從行為開始，對該API或者組件進(jìn)行描述，最后再將缺失的“實現(xiàn)”部分補(bǔ)全就可以了。

假設(shè)我們將在上一章中的AppComponent里使用這個新的component，根據(jù)之前的需求描述，我們的使用場景應(yīng)該是這個樣子的 :

import {Component, OnInit} from "@angular/core";

import {Item} from "./CheckableItem";

//該component使用checkable-item作為selector
//并可以通過[item]屬性傳入一個object
//還可以通過(onItemClicked)接受一個點(diǎn)擊事件
@Component({
    selector: "my-app",
    template: `
    
My First Angular 2 App
    
    
    `
})
export class AppComponent implements OnInit {

    itemInfo: Item;

    //當(dāng)實現(xiàn)OnInit接口時，必須重寫ngOnInit方法
    //關(guān)于OnInit，詳見：
    //https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-overview
    ngOnInit() {
        //設(shè)定初始值
        //根據(jù)需求第1條，包含兩個屬性
        this.itemInfo = {
            isChecked: false,
            txt: "Hello World!"
        };
    }

    //根據(jù)需求第3條，點(diǎn)擊component后，事件要
    //冒泡到父組件(調(diào)用方)
    toggle(item: Item) {
        //當(dāng)獲取到CheckableItem的點(diǎn)擊事件時，
        //給itemInfo重新賦值，并將isChecked置反
        //注：重新賦值是根據(jù)需求第4條的不可變性
        this.itemInfo = {
            isChecked: !item.isChecked,
            txt: item.txt
        };
    }
}

根據(jù)上述介紹，再結(jié)合之前的效果圖，我們要做的當(dāng)然就是一個標(biāo)準(zhǔn)的Component。她有template，并且包含了至少一個input和一個label標(biāo)簽。

有了使用場景(行為)，接下來就是實現(xiàn)這個CheckableItem了：

touch ts/CheckableItem.ts

向剛創(chuàng)建的ts/CheckableItem.ts文件里寫入如下內(nèi)容：

import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy} from "@angular/core";

@Component({
    //臟檢查策略，OnPush指當(dāng)且僅當(dāng)傳入?yún)?shù)的reference發(fā)生變更時
    //觸發(fā)組件重繪。這和React中的shouldComponentUpdate異曲同工，
    //不過更先進(jìn)(因為React還是需要手動實現(xiàn)的)
    //這也是上一步里itemInfo必須重新賦值的原因
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "checkable-item",
    //僅在當(dāng)前component作用域下有效的class
    styles: [`
        .deleted{
            text-decoration: line-through;
        }
    `],
    //template就如我們需求里的描述那樣，由一個input標(biāo)簽和
    //一個label標(biāo)簽組成
    template: `
    

        
        {{ item.txt }}
    
    `
})
export class CheckableItem {
    //item被聲明為Input，即會在父組件傳入?yún)?shù)時用到
    @Input() item: Item;
    //onItemClicked被聲明為Output，用來在用戶點(diǎn)擊input標(biāo)簽
    //時向上冒泡事件
    @Output() onItemClicked = new EventEmitter();

    //監(jiān)聽input上的click事件，當(dāng)用戶點(diǎn)擊時，首先阻止默認(rèn)行為
    //因為是否變化(重繪)是由父組件決定的
    //然后冒泡點(diǎn)擊事件
    clickItem(e: MouseEvent) {
        e.preventDefault();
        this.onItemClicked.emit(this.item);
    }
}


export interface ToggleItemHandler {
    (item: Item): void;
}

export interface Item {
    isChecked?: boolean;
    txt?: string;
}

有朋友看到這里，對[]、 ()之類的綁定標(biāo)簽表示不解，這里我們統(tǒng)一來解釋：

[target] = "expression"，將右邊表達(dá)式對應(yīng)的值綁定到左邊的target。譬如：在ts/app.ts里，我們使用[item]="itemInfo"將itemInfo對應(yīng)的值綁定到了組件CheckableItem的item上，這樣，在CheckableItem里就可以通過this.item獲取到父組件傳進(jìn)來的參數(shù)了。

(target) = "statement"，將左邊的事件傳遞給了右邊的表達(dá)式(通常就是事件處理函數(shù))。譬如：在ts/app.ts里，我們使用(onItemClicked)="toggle($event)"將CheckableItem冒泡上來的onItemClicked事件傳遞給了toggle函數(shù)。

[class.deleted]="item.isChecked"，是class的一種特殊用法，指當(dāng)item.isChecked表達(dá)式為真時，為該標(biāo)簽的class里增加deleted；反之，則刪除該標(biāo)簽class里的deleted

打開之前寫的index.ts，增加CheckableItem引入:

import "core-js/es6";
import "core-js/es7/reflect";
import "zone.js/dist/zone";

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent }  from "./app";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

//引入CheckableItem
import {CheckableItem} from "./CheckableItem";

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, CheckableItem ],//引入聲明
  bootstrap:    [ AppComponent ]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

OK，事已至此，我們是不是又該啟動一把程序看看效果了？

npm start

你又看到了偉大的效果：

下回預(yù)告：小刀升級 － 多component協(xié)作