Angularと戯れる④

Posted at 2024-09-12

はじめに

Angularチュートリアル：Tour of Heroesを読み進めていきます。

開発環境

OS: Windows10
Nodeバージョン: 18.18.0
Angular CLI バージョン: 17.3.8
エディタ: VSCode

3. フィーチャーコンポーネントの作成

3. フィーチャーコンポーネントの作成を読んでいきます。

ソースコードを読み解いてみる

アプリの構成

今までheroesコンポーネント内で行っていた「Heroの詳細を表示する」という責務をhero-detailコンポーネントに委託します。

最終的に、こんな感じの構成になります。

子コンポーネントへのデータの送信

＠Inputデコレーター

親コンポーネントから子コンポーネントへの値の受け渡しの際に使われるデコレーター。

このチュートリアルの場合、「heroesコンポーネントが持っている値をhero-detailコンポーネントに渡す」ことを行います。

受け渡し元（今回の場合heroesコンポーネント）を親コンポーネント、受け渡し先（今回の場合hero-detailコンポーネント）を子コンポーネントと考えます。

子コンポーネント側の準備：親から渡ってくる値を受ける窓口を作る

src/app/hero-detail/hero-detail.component.ts

import { Component, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent {
  /*
   * ・親コンポーネントから渡ってくる値をhero（Hero型）という窓口で受ける。
   * ・@Inputデコレーターを使うことで、親コンポーネントからの入力を受け付けることができる。
   */
  @Input() hero?: Hero;
}

[参考]

Inputデコレーター： https://v17.angular.jp/api/core/Input
親子間でのデータ共有： https://v17.angular.jp/guide/inputs-outputs

プロパティバインディング

コンポーネントがもつ値（プロパティ）を、ターゲットのタグの特定の値に代入する手法。
[%受け渡し先のプロパティ名%]="%受け渡し元のプロパティ名%"

このチュートリアルでは、heroesコンポーネントが持つselectedHeroというプロパティを、hero-detailコンポーネントのheroというプロパティに渡します。

値を渡す側：heroesコンポーネント

src/app/heroes/heroes.component.html

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

selectedFolderの値を、受け渡し先のhero-detailコンポーネントに渡します。heroという名前の窓口を先方が用意してくれているので、受け渡し先としてそこを指定します。

なお、app-hero-detailという名前は、hero-detailコンポーネントのtsのselectorに記載されている値と同じです。

src/app/hero-detail/hero-detail.component.ts

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

値を受け取る側：hero-detailコンポーネント

src/app/hero-detail/hero-detail.component.html

<div *ngIf="hero">
    <h2>{{ hero.name }}</h2>
    <div>id: {{ hero.id }}</div>
    <div>
        <label for="hero-name">Hero name: </label>
        <input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
    </div>
</div>

受け渡し元であるheroesコンポーネントのselectedHeroプロパティを、受け渡し先であるhero-detailでは "hero" という窓口で受けます。