Angularヒーローチュートリアル4

さらに細かくコンポーネントに分割

詳細のコンポーネント

詳細部分を他のコンポーネントに分けることで開発しやすくします。

ターミナル

$ cd src/app
$ ng generate component hero-detail

htmlを変更

まず、最初に作ったheroesコンポーネントのHTMLを以下のように変更します。

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>

詳細部分の記述を消し、代わりにコンポーネントタグを書きます。
[hero]='selectedHero'と書くと、hero-detailコンポーネントにheroというプロパティを値つきで渡すことができます。
しかし、hero-detailコンポーネントで使用するにはtsファイルで処理をする必要があります。

tsでプロパティを受け取る準備

hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
//Inputを追加でimport(@Input()を使うため)
import {Hero} from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero : Hero;//ここでプロパティを宣言している

  constructor() { }

  ngOnInit() {
  }

}

@Inputをimport使用することで、プロパティを受け取り同じコンポーネントのhtmlで使用することができるようになります。

hero-details.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>

分割する前と同じようになったら、うまくコンポーネントに分割できています。