大牛's 筆記

首先在 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 重新修改為

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 的底部