[Angular] 「基本的なAngularアプリをはじめる」をやってみる(4)親コンポーネントにデータを渡す

6960 ワード
HTML Angular 初心者 TypeScript HTML テキストリンク

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

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

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

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

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(3)子コンポーネントにデータを渡す

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

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

Angular公式ページ ： 親コンポーネントにデータを渡す

Notify Meボタンを動作させるには、子コンポーネントが通知して親コンポーネントにデータを渡す必要があります。

1.product-alerts.component.ts で、Output と EventEmitter をインポートする
product-alerts.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
2.notify という名前のプロパティを @Output() デコレーターと EventEmitter() のインスタンスで定義する
product-alerts.component.ts
export class ProductAlertsComponent {
  @Input() product;
  @Output() notify = new EventEmitter();
}
3.Notify Meボタンをイベントバインディングで更新し、notify.emit()メソッドを呼び出す
product-alerts.component.html
<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>
4.product-list.component.ts で onNotify() メソッドを定義
product-list.component.ts
export class ProductListComponent {
  products = products;
  test_1 = '製品';

  share() {
    window.alert('The product has been shared!');
  }

  onNotify() {
    window.alert('メッセージ : You will be notified when the product goes on sale');
  }
}

親の ProductListComponentは、ProductAlertsComponentがイベントを発生させたときに動作します。

5.product-list.component.html で、 を製品リストコンポーネントの onNotify() メソッドにバインドする
product-list.component.html
<button (click)="share()">
  shareボタン
</button>

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>

Notify Meボタンをクリックすると、下図のようなアラートが表示されるようになります。

ここまでで、いちおうAngularチュートリアルの入門編は終わりです。