摘要:我們使用了模式書寫,并引入了思想,這些以前只在里見到的設計,現在里也有體現,并且在本章中會著重講解多的協作。如果之前寫過,那對于這種書寫方式一定無比熟悉。每次數據的變更,無論是還是,都將變化冒泡到,然后由再向下逐級推送各組件是否重繪。
前集回顧
在上一章里我們講了如何在angular2下開發一個component(還沒做的趕緊去學吧)。我們使用了Unidirectional Data Flow模式書寫component,并引入了Immutable思想,這些以前只在React里見到的設計,現在angular2里也有體現,并且在本章中會著重講解多components的協作。
本章源碼:multicomponents
本章使用angular2版本為:2.4.5,webpack版本為: 2.2.0
先來看看我們將要完成的效果圖:
需求分析(注意動畫部分),由上一章的一個component,變成了一個輸入component、 一個遍歷顯示component、 一個總結component。畫一個組件樹的示意圖如下:
圖片描述
分析第一部分我們將其命名為InputItem
它由一個input[type="text"]和一個button組成
當點擊button時,需要向上冒泡事件,并組合一個新的CheckableItem隨事件發送出去
清空input[type="text"]
第3步操作,也可以通過鍵盤敲擊"回車鍵"完成操作
分析第二個遍歷顯示部分參考上一章
關于*ngFor
我們將其命名為Counter
它由一個span組成,顯示總結信息
它接受一個items參數,用來生成總結信息
總結信息為:顯示當前還有多少個isChecked === false的item
設計use case還是老套路,先來設計這些新的components的使用場景(這種方式,我們稱之為"BDD",不了解的朋友參考以BDD手寫依賴注入。
重構ts/app.tsimport {Component} from "@angular/core"; import {Item} from "./CheckableItem"; @Component({ selector: "my-app", template: `實現InputItemMy First Angular 2 App
` }) export class AppComponent { //聲明items為成員變量 items: Item[] = []; //當捕獲到onItemAdded事件時,調用該方法,添加新item到items里 //注:根據Immutable策略,生成新的items addItem(item: Item) { this.items = [...this.items, item]; } //點擊checkable-item時,置反其isChecked屬性 //注:根據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
向剛創建的ts/InputItem.ts中,添加如下內容:
import {Component, Output, EventEmitter, ChangeDetectionStrategy} from "@angular/core"; @Component({ //這里仍然使用OnPush策略 changeDetection: ChangeDetectionStrategy.OnPush, selector: "input-item", //template里包含一個input[type="text"]和button //外面又一個form標簽是因為需求中希望回車鍵也可以觸發操作 template: `` }) export class InputItem { //雙向綁定到input[type="text"] text: string; //向外部冒泡的事件 @Output() onItemAdded = new EventEmitter(); //無論點擊button、還是敲擊回車鍵,都處罰添加事件 //組裝一個新的item對象, //清空text onSubmit() { this.onItemAdded.emit({ isChecked: false, txt: this.text }); this.text = ""; } } 實現Counter
touch ts/Counter.ts
向剛創建的ts/Counter.ts中,添加如下內容:
import {Component, OnChanges, SimpleChange, Input, ChangeDetectionStrategy} from "@angular/core";
import {Item} from "./CheckableItem";
@Component({
//這里仍然使用OnPush策略
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "counter",
//template包含一個span
template: `
We have {{ length }} item{{ postFix }}
`
})
export class Counter implements OnChanges {
//接受items參數
@Input() items: Item[];
postFix: string;
length: number;
//每次當參數items的reference發生變化時,觸發該方法
//獲取新的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" : "";
}
}
修改CheckableItem
import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy} from "@angular/core"; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: "checkable-item", styles: [` .deleted{ text-decoration: line-through; } `], template: `` }) 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,所以數據的變更都是Immutable的。如果之前寫過React,那對于這種書寫方式一定無比熟悉。每次數據的變更,無論是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,代碼寫到這里基本就結束了,看看效果吧
npm start
你又看到了偉大的效果:
下回預告:使用service
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79219.html
摘要:通過增加刪除元素改變布局的。譬如和控制元素顯示隱藏,或者改變元素行為的。譬如設計看過我之前介紹以手寫依賴注入的朋友應該已經對行為驅動多少有些了解了。她有,并且包含了至少一個和一個標簽。,將左邊的事件傳遞給了右邊的表達式通常就是事件處理函數。 前集回顧 在上一章里我們講了如何為angular2搭建開發環境(還沒搭起來的趕緊去看哦),并使之跑起來我們的第一個My First Angular...
摘要:前集回顧上一章里我們在里通過組合三個組件,并通過單向數據流的方式把她們驅動起來。設計每章都會提一下,先設計使用場景這種方式,我們稱之為,不了解的朋友參考以手寫依賴注入。 前集回顧 上一章里我們在AppComponent里通過組合InputItem、 CheckableItem、 Counter三個組件,并通過Unidirectional Data Flow(單向數據流)的方式把她們驅動...
angular2是什么?我猜不容我贅述,各位一定略有耳聞,無論是曾經AngularJS的擁躉,亦或是React的粉絲,都或多或少的對她有過一點了解。未見其物、先聞其聲,angular2在問世之前已經做足了宣傳,想必諸位也一定被下面各種詞匯所震懾,什么:TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive ...
摘要:可以在不必打斷其它業務的前提下,升級應用程序,因為這項工作可以多人協作完成,在一段時間內逐漸鋪開,下面就方案展開說明主要依賴提供模塊。在混合式應用中,我們同時運行了兩個版本的。這意味著我們至少需要和各提供一個模塊。 angular1.x 升級 angular2+ 方案 我給大家提供的是angular1.x和angular5并行,增量式升級方案,這樣大家可以循序漸進升級自己的應用,不想看...
摘要:的思想非常先進,摒棄了那種復雜的構建模式,采用了組件化開方的方,那我們一起來看一看,一個基礎的組件是什么樣子的呢。 angular2的思想非常先進,摒棄了angular1那種復雜的構建模式,采用了組件化開方的方,那我們一起來看一看,一個基礎的組件是什么樣子的呢。angular2-demoshowImg(http://static.xiaomo.info/images/angular.p...
閱讀 964·2023-04-26 02:56
閱讀 9438·2021-11-23 09:51
閱讀 1850·2021-09-26 10:14
閱讀 2980·2019-08-29 13:09
閱讀 2154·2019-08-26 13:29
閱讀 571·2019-08-26 12:02
閱讀 3562·2019-08-26 10:42
閱讀 3000·2019-08-23 18:18