Angulra2 View建立 with VS2015 - Step3. 拆分Component | 大牛's 筆記 - 點部落

2016-07-12

Angulra2 View建立 with VS2015 - Step3. 拆分Component

142
0
Angular2
2020-09-17

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>
  `
})

*ngFor 前面的(*)是Angular2語法所定義。

接著可以試著在 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>

事件綁定說明

(click)="onSelect(hero)"
小括號表示<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>

*ngIf 前面的(*)是Angular2語法所定義。

當 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' }
];

回首頁

大牛's 筆記

一本筆記