Angulra2 View建立 with VS2015 - Step2. 拆分Component
首先在 app.component.ts 下方建立一個json格式的資料
這部分之後會改為WebAPI所回傳的資料
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
在 AppComponent 建立一個 public 屬性來綁定資料
TypeScript 會自己從 HEROS 來判斷資料型態為何
export class AppComponent {
public heroes = HEROES;
title = 'Tour of Heroes';
}
@Component 的 template 修改成以下形式
使用 *ngFor 將資料列顯示在頁面上
@Component({
selector: 'my-app',
template: `
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
`
})
接著可以試著在 template 之後加上CSS語法
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
app.component.ts 完整程式碼及顯示結果如下:
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h2>My Heroes1</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
`,
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
})
export class AppComponent {
public heroes = HEROES;
title = 'Tour of Heroes';
}
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
===================我是分隔線===================
目前為止我們已經有了可以顯示所有Heros和單獨Hero的頁面,但是這兩這之間並沒有任何關聯
通常在操作上會希望使用者在所有列表中任選一位,然後顯示此英雄的詳細資料。
Click事件
把程式碼修改成以下片段,用來綁定click事件
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
事件綁定說明
小括號表示<li>元素上的click事件就是我們要綁定的對象。等號右邊則會呼叫 AppComponent 中的 onSelect() 方法,並把 hero 當作參數傳遞。
增加Click方法
把 HEROS 的資料用變數 heroes 接起來
設定變數 selectedHero 的資料型別為 Hero
onSelect() 方法所傳入的參數為 hero,此參數型態為 Hero
this.selectHero 所對應到的資料為參數 hero 參數所傳遞進來的資料
export class AppComponent {
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero) { this.selectedHero = hero; }
title = 'Tour of Heroes';
}
接著把選取到的 hero 顯示到頁面上,template 需加上以下程式碼
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
重新整理頁面後會發現原有的英雄列表無法正常顯示,開啟開發人員工具也會出現許多錯誤
這是因為我們在 template 所新增的是 selectedHero.name 和 selectedHero.id ,但是這個屬性目前並不存在,因為 selectedHero 在這時候還是屬於 undefined。
因此我們可以在 selectedHero 成功取值之前先不要出現在 DOM 中,直到選中某個英雄列表然後賦予它值。
所以上一個步驟所新增的 template 需要稍微修改一下,用 <div> 將整個區塊包起來然後增加 *ngIF
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
當 selectedHero 不存在時,ngIf 會從 DOM 中移除這一區塊的HTML,也就表示說不會產生綁定錯誤的問題,需等到 selectedHero 有值時才會出現此區塊HTML然後綁定對應的資料。
接著可以增加一點CSS樣式來讓選擇時的顯示更為明顯,英雄列表的 template 部分增加以下程式碼片段
//[class.selected]="hero === selectedHero"
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
app.component.ts 完整程式碼如下:
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
`,
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
})
export class AppComponent {
heroes = HEROES;
selectedHero: Hero;
title = 'Tour of Heroes';
onSelect(hero: Hero) { this.selectedHero = hero; }
//onSelect(hero: Hero) { console.log(JSON.stringify(hero)); }
}
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];