[新手教程-5] 建立Service

這邊是上一篇Angular的主從元件開發的範例檔案:按此下載

創建 HeroService

使用Angular CLI創建一個名為hero的服務

我們會看到在src/app下多出了兩個檔案:hero.service.spec.ts和hero.service.ts

打開src/app/hero.service.ts可以看到下面內容

注意到我們用@Injectable() 來宣告HeroService這個類別,代表這個類別可能本身有依賴注入,對Service來說是強烈建議要加上這個宣告

將HeroService提供給app使用

Service可以供appModule、或任何Component使用,如果要給appModule使用,
則需在src/app/app.module.ts的@NgModule裡加入

這邊有更多NgModule的說明:NgModule

另外,若要使用CLI來自動完成providers的設定,則可以用下面的指令

修改HeroesComponent去使用HeroService裡的資料

打開src/app/heroes/heroes.component.ts,修改成以下的內容

讓getHeroes被更動時能夠被通知

Observable是RxJS library中很重要的一個功能。

當我們在src/app/hero.service.ts的getHeroes方法回傳值前面加上Observable宣告,當service內的資料變動時,其他注入的內容也會同步被異動

首先要先import下面兩個檔案

然後在getHeroes的回傳直類型前加上Observable宣告

注:若使用HttpClient.get<Hero[]>()亦會傳回Observable<Hero[]>,只是內容是由http傳來

在接收Observable物件時的方法也與非Observable物件的方式不同,過去若非Observable物件時,在hero.component.ts裡的getHeroes函數如下

若要使用Observable宣告則須改為:

Observable.subscribe()是最關鍵的相異之處
最大的差異在於我們送出修改到伺服器傳回回應之間,未使用Observable.subscribe()方法時,它不會先凍結UI不讓使用者修改,而有可能會造成資料的不一致。而使用Observable.subscribe()可以避免這個問題。

本日範例下載: live example / download example

[新手教程-4] Angular的主從元件開發

創立hero-detail元件

在前一篇新手教程3-使用angular的迴圈及判斷式等功能裡,我們在顯示selectedHero的資訊時是與列表寫在同一個頁面
但如果顯示詳細資訊的地方有需要額外拆分出來,可以在創立一個元件,並將selectedHero傳入元件

寫入hero-detail的內容

開啟檔案src/app/hero-detail/hero-detail.component.html,這邊會將selectedHero的名稱改為hero

讓元件能接受外部傳送物件進來

開啟src/app/hero-detail/hero-detail.component.ts

在hero-detail.component.ts裡面,hero一定要以@Input來宣告這個物件

而在HeroesComponent裡,則會以下面的宣告來將hero的值傳入

現在我們打開heroes.component.html,修改後的網頁內容會如下

今日練習的範例連結:live example / download example

[新手教程-3] 使用Angular的迴圈及判斷式等功能

延續上一篇的範例: 請按此下載.

利用*ngFor來做迴圈顯示完整列表

首先開啟src/app/heroes/heroes.component.ts
設定一個變數heroes

接著開啟app.component.html,利用*ngFor來迴圈式的顯示列表內容

這時網頁上就可以看到成果如下圖:

更多資訊有關於ngFor

使用(click)來設定觸發事件

開啟src/app/heroes/heroes.component.ts,在li裡面增加click的事件

在src/app/heroes/heroes.component.ts增加處理的函數

更多資訊有關於event-binding

以條件式去增加元件的類別

打開heroes.component.html,在li內增加 [class.要增加的類別名稱]=”條件式為true時增加”

這樣當hero === selectedHero為真時,這個li就會被加上selected這個類別
接下來再到src/app/heroes/heroes.component.css設定該類別的CSS,就能突顯現在所選擇的是那一個了
[code lang=”css”].selected{
color:red;
}