[新手教程-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;
}

[新手教程-2] 創立Angular的元件

使用CLI來為專案建立一個元件

用這個指令,CLI會為我們初始化一個新的元件樣版
這時我們開啟app/heroes/heroes.component.ts

只要創建元件,都必需從Angular去import Component。
而@Component則是用來定義這一個元件的相關資訊,有三個metadata

  1. selector: the components CSS element selector以及在HTML裡要宣告的TAG名稱
  2. templateUrl: 要使用的HTML樣版位置
  3. styleUrls: 專為這個元件設定的CSS

要注意的是,我們通常會使用export class,以方便在其他的模組裡可以import來使用

修改元件內容

打開heroes.component.ts

修改heroes.component.html,使用{{hero}}來顯示剛剛在TS檔裡定義的變數

將元件放進頁面裡

打開src/app/app.component.html

這時候就可以在頁面中看到剛剛我們所增加的內容

使用物件

創建一個Hero物件
src/app/hero.ts

打開src/app/heroes/heroes.component.ts,給予物件正確的值

顯示在heroes.component.ts所設定的值

如果希望將變數格式化
則可以使用

這個格式化的功能叫做Pipes,更多的說明請見Pipes說明

雙向繫結

Angular一個很方便的功能就是可以支持雙向繫結,使用[(ngModel)]能做到當欄位的值改變時,TS裡變數的值也同時被更改。
這個功能在做表單驗證時非常方便
詳細使用說明請見:NgModules
使用方法: 在src/app/heroes/heroes.component.html加上下面這段

接著要去app.module.ts去加上import資訊讓專案能夠使用ngModel標籤
要注意是在app.module.ts裡喔!
先import並且將FormsModule加進@ngModule的imports列表內,讓下面所有的元件都可以使用FormsModule的功能

接著,要把剛剛我們所建立的元件HeroesComponent放進@NgModule.declarations裡

在app.module.ts的@NgModule增加

這時,我們會發現我們更動input裡的文字時,model的值也會被更改

今日練習成果下載:live example / download example.