angular:angular入門_はじめてのアプリ
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
angular:angular入門_はじめてのアプリ [2019/11/14 06:13] ips [ロパティバインディング [] 構文] |
angular:angular入門_はじめてのアプリ [2019/11/14 06:44] (現在) ips [親から子コンポーネントへのデータの受け渡し] |
||
|---|---|---|---|
| ライン 89: | ライン 89: | ||
| - | ===== 親から子コンポーネントへのデータの受け渡し ===== | + | ===== 親から子コンポーネントへのデータの受け渡し@Input ===== |
| <code> | <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コンポーネントの名前 | selector: 'app-product-alerts' //Angureコンポーネントの名前 | ||
| … | … | ||
| ライン 101: | ライン 109: | ||
| ↓ | ↓ | ||
| - | ②product-list.component.html | + | ②product-list.component.html // 子のHTML |
| - | <app-product-alerts [product]="product"> | + | <app-product-alerts [product]="product"> //プロパティバインディング |
| </app-product-alerts> | </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> | </code> | ||
angular/angular入門_はじめてのアプリ.1573679630.txt.gz · 最終更新: 2019/11/14 06:13 by ips
