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> 元素。
目前的 AppComponent 有 Heros 和 Hero 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]