Angular勉強中:@Iputと@Output

もっぱらAngular勉強中の私です。
今日は忘れない内にAngularの基礎となる@Inputと@Outputの整理を。

まずInputと@Outputとはなんぞやと。

@Input

親コンポーネントから子コンポーネントへの単方向バインディング

@Output

子コンポーネントから親コンポーネントへイベントを送る

---

簡単にイラストで起こすとこんな感じ

@Input

@Output

このゆるいストーリーを早速コードに起こしてみます。

用意したのは2つのコンポーネント

・ParentComponent　(親：子が選んだケーキを表示する)
・ChildComponent　(子：メニューを見てケーキを選ぶ)

ParentComponent

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

@Component({
  selector: 'app-parent',
  template: `
  <ul>
    <li *ngFor="let cake of cakes">
      <app-child
      [dessert]="cake"
      (selected)="show($event)"
      ></app-child>
    </li>
  </ul>
  `,
})

export class ParentComponent implements OnInit {

  cakes = [
    { name: 'イチゴのショートケーキ' ,price: 280},
    { name: 'チョコレートケーキ' ,price: 300},
    { name: 'モンブラン', price: 320},
  ];

  show(dessert: any) {
    console.log(dessert.name);
  }

}

ChildComponent

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

@Component({
  selector: 'app-child',
  template: `
  <div>
    名前:{{dessert.name}},値段: {{dessert.price}}
    <input type="button" value="選ぶ" (click)="click(dessert)" />
  </div>
  `,
})

export class ChildComponent {
  @Input() dessert: any;
  @Output() selected = new EventEmitter();

  click(dessert): any {
    this.selected.emit(dessert);
  }
}

出来た画面がこちら

css当ててないのとても殺風景ですみません(デザイナーのくせに)

自分なりに整理をすると

ChildComponent編

1.名前:{{dessert.name}},値段: {{dessert.price}} は親から受け取った情報を表示している。
それを設定するのが@Input() dessert: any;
(dessertはstring型とnumber型なのでany型で受け取るよ)

2.(click)="click(dessert)"で親にイベントを渡す
渡す内容をまず@Output() selected = new EventEmitter();を入力
(これはこういう呪文だと覚えておく…selectedは親で記述したイベント)

3.次に click(dessert): any { this.selected.emit(dessert); } (引数で選択したのを送るよと言う意味。emitは呪文)

ParentComponent編

1.ケーキ一覧の情報を持っている

2.[dessert]="cake"子で表示する為の情報[dessert]にケーキの一覧(ここで言うcake)を設定
([]はDOMの対応する＠Inputプロパティへ値、まやは参照を渡す)
3.(selected)="show($event)" 子からのイベントバインディング(先程、子で＠Outputで記述したselectedのこと)をどうするか記述

自分の言葉で整理

子コンポーネント：
・親が持っている情報(ここで言うケーキ一覧)をどのように表示するか。
・選択(イベント)をする

親コンポーネント：
子コンポーネントで設定した情報をどうするのか記述する。
(ここで言う、ケーキ情報を渡す、選択したケーキをコンソールに表示する)

なのかなと。(何か語弊があったらすみません。)
今度はserviceを加えて少し複雑な@Input@Outputに挑戦しよう。
ブログになれてないのでコードが見づらく申し訳ないです><

おまけ

@Input@Outputを記述する時import忘れずに!!
InputとOutputは記述したのにEventEmitter忘れてた。
OutputとEventEmitterはセットで覚えましょう★