Angulra2 View建立 with VS2015 - Step4. 多重Component

Angulra2 View建立 with VS2015 - Step4. 多重Component

首先在 app 資料夾底下新增一個 hero-detail.component.ts 檔案然後建立 HeroDetailComponent

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-hero-detail',
})
export class HeroDetailComponent {
}

一開始,先從 Angular 引入 Component 和 Input 的裝飾器(decorators)。

使用 @Component 建立中繼資料(metadata),用 selector 來選擇指定的組件。

接著將它導入到 AppComponent 組件中,並建立相對應的 <my-hero-detail> 元素。

目前的 AppComponentHerosHero Detail 兩種 template,所以我們從中切割出 Hero Detail 的部分,將他改放到 HeroDetailComponent 中。

template: `
  <div *ngIf="hero">
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </div>
  </div>
`

接著新增變數到我們的 HeroDetailComponent 中,會發現以下錯誤。

因為 Hero Class 還在原本的 AppComponent 裡面,但卻有兩個組件需要引用他,因此我們將它再度分離出來,移到屬於自己的 hero.ts 檔案中。

在app資料夾中新增 hero.ts 檔案

export class Hero {
  id: number;
  name: string;
}

接著在 app.component.ts 和 hero-detail.compomemts.ts 中,分別加入

import { Hero } from './hero';

//import { Class名稱 } 從 ' ./資料來源路徑 '

而 app.component.ts 中原本放置 Hero Detail 的 template 重新修改為

<my-hero-detail></my-hero-detail>
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>
  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,

由於瀏覽器並不認識 <my-hero-detail> 標籤因此會忽略這部分

所以要利用增加 Directives 的方式來告訴Angular,必須放在 @Component 的底部

directives: [HeroDetailComponent]