[Angular]チュートリアルその 4 一覧と詳細のコンポーネントの分割

Angular をチュートリアルを使って勉強する機会があったので、その時の内容について説明していきます。

Angular の本家サイトのチュートリアルの「 Master/Detail Components 」の説明をしていきたいと思います。

今までは Hero コンポーネントだけで一覧の表示と編集を行なっていましたが、それを一覧のコンポーネント（ Master ）と詳細のコンポーネント（Detail）に分割します。

このチュートリアルがマスターできれば、機能分割されたシンプルなコンポーネントの実装が行えるようになります。

本家サイトはこちらになります。

Angular

作成するプロジェクトは「 Tour of Heroes 」というアプリケーションです。

作成するアプリの概要についてはこちらから確認できます。

Angular

では、早速始めていきたいと思います！

開発環境
HeroDetailComponent の作成
1. テンプレート実装
2. hero property を Input デコレータとして追加する
HeroDetailComponent を表示する
1. HeroesComponent の修正
前回からの変更点
ソースコードについて
最後に

開発環境

macOS : Sierra 10.12.6
node : 8.4.0
npm : 5.3.0
Angular : 4.3.6

HeroDetailComponent の作成

下記コマンドを実行して、 hero-detail コンポーネントを作成します。

$ ng generate component hero-detail

コマンドを実行すると、 HeroDetailComponent が生成され、 AppModule にも宣言情報が追記されます。

テンプレート実装

詳細部分のテンプレートを実装します。

コンポーネントを追加した際に、 hero-detail.component.html というファイルも追加されているので、そのファイルを編集していきます。

<div *ngIf="hero">

  <h2>{{ hero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

hero property を Input デコレータとして追加する

HeroDetailComponent のテンプレートは Hero という型のプロパティをバインドしています。 HeroDetailComponent に Hero というシンボルをインポートします。

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

次に、今まで詳細部分のテンプレートの実装を行なっていた「 heroes.component.html 」の詳細表示を、 HeroDetailComponent が実行されるように変更します。

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero-detail.component.ts の @angular/core のインポート文の所に Input を追加します。

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

最後に @Input() デコレータとして hero プロパティを hero-detail.component.ts に追加します。

export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor() { }

  ngOnInit() {
  }

}

HeroDetailComponent を表示する

今のままではまだ詳細部分の表示はできないので、 HeroDetailComponent が実行されるように、 HeroesComponent 周りを修正していきます。

HeroesComponent の修正

heroes.component.htmlを修正します。

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

このように修正することで、 HeroDetail をバインドするようになります。

heroes.component.html は最終的にこのようになります。

<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>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>