angular:angular入門_はじめてのアプリ
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
angular:angular入門_はじめてのアプリ [2019/11/14 06:03] ips [コンポーネントのツリー] |
angular:angular入門_はじめてのアプリ [2019/11/14 06:44] (現在) ips [親から子コンポーネントへのデータの受け渡し] |
||
|---|---|---|---|
| ライン 23: | ライン 23: | ||
| - | ===== ロパティバインディング [] 構文 ===== | + | ===== プロパティバインディング [] 構文 ===== |
| []でhtmnlタグのプロパティをバインディングできる | []でhtmnlタグのプロパティをバインディングできる | ||
| <code javascript> | <code javascript> | ||
| ライン 86: | ライン 86: | ||
| } | } | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ===== 親から子コンポーネントへのデータの受け渡し@Input ===== | ||
| + | |||
| + | <code> | ||
| + | ①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コンポーネントの名前 | ||
| + | … | ||
| + | export class ProductAlertsComponent implements OnInit { //クラス名 | ||
| + | @Input() product; // インプットデコレーター付きのプロパティ | ||
| + | constructor() { } | ||
| + | |||
| + | ↓ | ||
| + | |||
| + | ②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> | </code> | ||
angular/angular入門_はじめてのアプリ.1573679039.txt.gz · 最終更新: 2019/11/14 06:03 by ips
