angular:angular入門_はじめてのアプリ

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- angular:angular入門_はじめてのアプリ [2019/11/14 06:14]
ips [親から子コンポーネントへのデータの受け渡し]
+++ angular:angular入門_はじめてのアプリ [2019/11/14 06:44] (現在)
ips [親から子コンポーネントへのデータの受け渡し]
@@ ライン 89: / ライン 89: @@
-===== 親から子コンポーネントへのデータの受け渡し =====
+===== 親から子コンポーネントへのデータの受け渡し@Input =====
 <code>
-①product-alerts.component.ts
+①product-list.component.html　親のhtml
+  <app-product-alerts
+  [product]="product" //ここで子のapp-product-alertsのproductプロパティを設定
+  (notify1)="onNotify2()"
+  >
+　↓
+②product-alerts.component.ts　子のクラス
 selector: 'app-product-alerts'　//Angureコンポーネントの名前
 　…
@@ ライン 101: / ライン 109: @@
 　↓
-②product-list.component.html
+②product-list.component.html　// 子のHTML
   <app-product-alerts [product]="product">　//プロパティバインディング
   </app-product-alerts>
+</code>
+===== 子コンポーネントからのイベントのリスニング@Output =====
+<code javascript>
+①product-alerts.component.ts　// 子のクラス
+import {Output,EventEmitter} from '@angular/core';
+...
+export class ProductAlertsComponent implements OnInit {
+  @Input() product;
+  @Output() notify1=new EventEmitter();　//notify1プロパティの変更でイベント発行できる
+  ↓
+②product-alerts.component.html // 子のHTML
+<p *ngIf="product.price > 700">
+<button (click)="notify1.emit()">Notify Me</button> // emit()メソッド呼び出し
+</p>
+　↓
+product-list.component.html　// 親HTML
+  <app-product-alerts
+  [product]="product"
+  (notify1)="onNotify2()"　//子のnotify1プロパティの変更イベントで、親のonNotify2()メソッド呼び出し
+  >
+  ↓
+④product-list.component.ts　// 親のクラス
+export class ProductListComponent {
+　...
+  onNotify2() {　//onNotify2メソッド
+    window.alert('You will be notified when the product goes on sale')
+  }
 </code>

angular/angular入門_はじめてのアプリ.1573679650.txt.gz · 最終更新: 2019/11/14 06:14 by ips