摘要：我們使用了模式書寫，并引入了思想，這些以前只在里見到的設(shè)計(jì)，現(xiàn)在里也有體現(xiàn)，并且在本章中會(huì)著重講解多的協(xié)作。如果之前寫過，那對于這種書寫方式一定無比熟悉。每次數(shù)據(jù)的變更，無論是還是，都將變化冒泡到，然后由再向下逐級推送各組件是否重繪。

前集回顧

在上一章里我們講了如何在angular2下開發(fā)一個(gè)component(還沒做的趕緊去學(xué)吧)。我們使用了Unidirectional Data Flow模式書寫component，并引入了Immutable思想，這些以前只在React里見到的設(shè)計(jì)，現(xiàn)在angular2里也有體現(xiàn)，并且在本章中會(huì)著重講解多components的協(xié)作。

本章源碼：multicomponents

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

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

(注意動(dòng)畫部分)，由上一章的一個(gè)component，變成了一個(gè)輸入component、 一個(gè)遍歷顯示component、 一個(gè)總結(jié)component。畫一個(gè)組件樹的示意圖如下：

圖片描述

我們將其命名為InputItem

它由一個(gè)input[type="text"]和一個(gè)button組成

當(dāng)點(diǎn)擊button時(shí)，需要向上冒泡事件，并組合一個(gè)新的CheckableItem隨事件發(fā)送出去

清空input[type="text"]

第3步操作，也可以通過鍵盤敲擊"回車鍵"完成操作

參考上一章
關(guān)于*ngFor

我們將其命名為Counter

它由一個(gè)span組成，顯示總結(jié)信息

它接受一個(gè)items參數(shù)，用來生成總結(jié)信息

總結(jié)信息為：顯示當(dāng)前還有多少個(gè)isChecked === false的item

還是老套路，先來設(shè)計(jì)這些新的components的使用場景(這種方式，我們稱之為"BDD"，不了解的朋友參考以BDD手寫依賴注入。

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

import {Item} from "./CheckableItem";

@Component({
    selector: "my-app",
    template: `
    
My First Angular 2 App
    
    
    
    
    
    
    
    `
})
export class AppComponent {
    //聲明items為成員變量
    items: Item[] = [];

    //當(dāng)捕獲到onItemAdded事件時(shí)，調(diào)用該方法，添加新item到items里
    //注：根據(jù)Immutable策略，生成新的items
    addItem(item: Item) {
        this.items = [...this.items, item];
    }

    //點(diǎn)擊checkable-item時(shí)，置反其isChecked屬性
    //注：根據(jù)Immutable策略，生成新的items
    toggle(item: Item, index: number) {
        this.items = [
            ...this.items.slice(0, index),
            { isChecked: !item.isChecked, txt: item.txt },
            ...this.items.slice(index + 1)
        ];
    }
}

touch ts/InputItem.ts

向剛創(chuàng)建的ts/InputItem.ts中，添加如下內(nèi)容：

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

@Component({
    //這里仍然使用OnPush策略
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "input-item",
    //template里包含一個(gè)input[type="text"]和button
    //外面又一個(gè)form標(biāo)簽是因?yàn)樾枨笾邢Ｍ剀囨I也可以觸發(fā)操作
    template: `
    

        
        Add Item
    
    `
})
export class InputItem {
    //雙向綁定到input[type="text"]
    text: string;
    //向外部冒泡的事件
    @Output() onItemAdded = new EventEmitter();

    //無論點(diǎn)擊button、還是敲擊回車鍵，都處罰添加事件
    //組裝一個(gè)新的item對象，
    //清空text
    onSubmit() {
        this.onItemAdded.emit({
            isChecked: false,
            txt: this.text
        });
        this.text = "";
    }
}

touch ts/Counter.ts

向剛創(chuàng)建的ts/Counter.ts中，添加如下內(nèi)容：

import {Component, OnChanges, SimpleChange, Input, ChangeDetectionStrategy} from "@angular/core";

import {Item} from "./CheckableItem";

@Component({
    //這里仍然使用OnPush策略
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "counter",
    //template包含一個(gè)span
    template: `
    
        We have {{ length }} item{{ postFix }}
    
    `
})
export class Counter implements OnChanges {
    //接受items參數(shù)
    @Input() items: Item[];

    postFix: string;
    length: number;

    //每次當(dāng)參數(shù)items的reference發(fā)生變化時(shí)，觸發(fā)該方法
    //獲取新的length、postFix，重繪組件
    //這里和React中的componentWillUpdate很相似
    ngOnChanges(changes: { [key: string]: SimpleChange }): any {
        let newItems: Item[] = changes["items"].currentValue;
        this.length = newItems.reduce((p, item) => p + (item.isChecked ? 0 : 1), 0);
        this.postFix = this.length > 1 ? "s" : "";
    }
}

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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "checkable-item",
    styles: [`
        .deleted{
            text-decoration: line-through;
        }
    `],
    template: `
    

        
        {{ item.txt }}
    
    `
})
export class CheckableItem {
    @Input() item: Item;
    @Output() onItemClicked = new EventEmitter();

    clickItem(e: MouseEvent) {
        e.preventDefault();
        this.onItemClicked.emit(this.item);
    }
}


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

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

組件樹的整體編寫思路就是Unidirectional Data Flow，所以數(shù)據(jù)的變更都是Immutable的。如果之前寫過React，那對于這種書寫方式一定無比熟悉。每次數(shù)據(jù)的變更，無論是InputItem還是CheckableItem，都將變化冒泡到AppComponent，然后由AppComponent再向下逐級推送各組件是否重繪。

打開index.ts，增加新模塊聲明引入

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 { FormsModule }   from "@angular/forms";
import { AppComponent }  from "./app";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import {CheckableItem} from "./CheckableItem";
import {InputItem} from "./InputItem";
import {Counter} from "./Counter";

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CheckableItem, InputItem, Counter ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

OK，代碼寫到這里基本就結(jié)束了，看看效果吧

npm start

你又看到了偉大的效果：

下回預(yù)告：使用service