mac OSX El Capitan Sierra で Angular 2 入門 (チュートリアル体験)　3

Tutorial: Tour of Heroes から第3回目のステップ。
だいたいこれくらいの量なら1日かからずに普通ならやるんだけど、Qiitaに書きながらやってると時間がかかる。
でもちゃんと描いてると理解が深まる感じもあるしこれいいかも。

[MULTIPLE COMPONENTS](https://angular.io/docs/ts/latest/tutorial/toh-pt3.html)
というわけで第3テップ。
ざっくり訳：今までのをリファクタリングしようぜ
*しょっぱなから英単語refactorが出てきて意味はわかるが和訳がわからないからググったらそのまま「リファクタリングする」だったことに驚愕している。


#詳細コンポーネントの作成
ヒーローリストとヒーローの詳細が一緒のコンポーネントになってるからこれを分けたい。
##詳細を別コンポーネントに分割
appフォルダ内に`hero-detail.component.ts`ファイルを新規作成。classは`HeroDetailComponent `

```ts:app/hero-detail.component.ts
import { Component, Input } from '@angular/core';

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

ここで命名規則の話をしてる。
翻訳が間違うと嫌なので原文をサクッとのっけとく
>###Naming conventions
>We like to identify at a glance which classes are components and which files contain components.
>
>Notice that we have an AppComponent in a file named app.component.ts and our new HeroDetailComponent is in a file named hero-detail.component.ts.
>
>All of our component names end in "Component". All of our component file names end in ".component".
>
>We spell our file names in lower dash case (AKA kebab-case) so we don't worry about case sensitivity on the server or in source control.

```
AppComponent > app.component.ts
HeroDetailComponent > hero-detail.component.ts
```
まぁこんな感じ。

詳細部分をHeroDetailに記述。
まずはAppの詳細部分をtemplateにそのまま記述します。

```ts:app/hero-detail.component.ts
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ファイルの作成

さらに`hero`を追加します。
ただ、今の状態だとHeroクラスはapp.component.tsにあるので読み込めない状況です。
そこでどこでも参照できるようにHeroクラス専用ファイルを別個に作りましょう。

```ts:hero.ts
export class Hero {
  id: number;
  name: string;
}
```

で作ったファイルを`app.component.ts`と`hero-detail.component.ts.`で参照します。

```
import { Hero } from './hero';
```

`HeroDetailComponent`にどのヒーローを表示するか伝える必要があります。
それをどこでやるかというと当然親となる`AppComponent`側から伝えます。
App側はどれを表示するのかをユーザー選択によって決定。
app.component.tsのtemplateを更新するとしたら多分こんな感じかな？

```
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
```

ここら辺ちょっと英文の意味が感覚的にはわかるけど完全に訳すことができない。
`input property`と`target property`について説明してるけど…んー…。
*あ〜これもしかして`Decorator パターン`が関連してる？デザインパターンちゃんとやんなきゃダメかなぁ

ここで困った時のlive example。
とりあえずは`@input`をpropertyの中に追加。
>`@Input() decorator`についてもっと学びたい場合は[Attribute Directives](https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#input)の章を参照

とりえあず先に進む。

#AppModuleの編集

`HeroDetailComponent`を使えるようにする為に`AppModule`でインポートを追加。

```ts:app.module.ts
import { HeroDetailComponent } from './hero-detail.component';
```

さらに`NgModule`decorator'sの`declarations`に`HeroDetailComponent`を追加。

```ts:app.module.ts
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

#AppComponentを編集

まずはHeroDetailComponentに書いた内容をそのまま変更

```
<my-hero-detail></my-hero-detail>
```

>ここで利用する名前は`HeroDetailComponent`の`selector`部分に書いてあるやつ。

さらに`AppComponent`の`selectedHero`に`HeroDetailComponent`をバインドする必要がありまする。
途中でこんな感じかなって書いてたやつ

```
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
```

というわけで`app.compnent.ts`の`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>
`,
```

これでこのステップはおしまい！
ちょっと家庭の事情でやるまでに時間かかってしまった…。
ここら辺は今まで家でやったことなかったからだけど、調整難しいなぁ。