「基本的なAngularアプリをはじめる」をやってみる(3)

Angular のチュートリアルをやってみています。

子コンポーネントにデータを渡す

このセクションでは、親コンポーネントである ProductListComponent からデータを受け取ることができる子コンポーネント ProductAlertsComponent を作成する方法を説明します。

チュートリアルの指示の通り product-alerts コンポーネントを生成します。
すると、自動的に以下の3つのファイルが作成されます。

product-alerts.component.ts
product-alerts.component.html
product-alerts.component.css

product-alerts.component.ts

import { Input } from '@angular/core';

product-alerts.component.ts に、上記のように Input をインポートするための記述を追加します。

product-alerts.component.ts

export class ProductAlertsComponent implements OnInit {
  @Input() product;
  constructor() { }

  ngOnInit() {
  }

}

上記のように @Input() product; という記述を追加します。

この @Input() デコレーターは、プロパティの値がコンポーネントの親である ProductListComponent から渡されることを示します。

product-alerts.component.html

<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>

product-alerts.component.html を開き、デフォルトに書かれているものを、上記のように書き換えます。

ProductListComponent の子として ProductAlertsComponent を表示するには、product-list.component.html にセレクターを追加します。

product-list.component.html

<button (click)="share()">
  Shareボタン
</button>

<app-product-alerts
  [product]="product">
</app-product-alerts>

（プロパティバインディングなるものを使用しています。この [] の使い方のことですね。）

ここまでやりますと、下図のように Notify Me というボタンが表示されるようになります。

この時点では、まだ Notify Me をクリックしても何も起きません。