差分

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

--- angular:angular入門_はじめてのアプリ [2019/11/13 21:43]
ips
+++ angular:angular入門_はじめてのアプリ [2019/11/14 06:44] (現在)
ips [親から子コンポーネントへのデータの受け渡し]
@@ ライン 23: / ライン 23: @@
-===== ロパティバインディング [] 構文 =====
+===== プロパティバインディング [] 構文 =====
 []でhtmnlタグのプロパティをバインディングできる
 <code javascript>
@@ ライン 44: / ライン 44: @@
 </code>
+===== ()イベントバインディング =====
+<code javascript>
+  <button (click)="share()">
+    share
+  </button>
+</code>
+===== コンポーネントは3つの要素 =====
+* コンポーネントクラス ...データやメソッド。product-list.component.ts
+* HTMLテンプレート ...UI。product-list.component.html
+* コンポーネント固有スタイル ...ルック・アンド・フィール(コンポーネントCSS)。product-list.component.css
+===== コンポーネントのツリー =====
+各Angularコンポーネントには特定の目的と責任がある。
+===== xxx.component.tsの構成 =====
+<code javascript>
+import { Component, OnInit } from '@angular/core';
+@Component({ // @Component()デコレーター...次のクラスがコンポーネントであることを示している。
+  selector: 'app-product-alerts',　// Angularコンポーネントに付ける名前です。
+  templateUrl: './product-alerts.component.html',
+  styleUrls: ['./product-alerts.component.css']
+})
+export class ProductAlertsComponent implements OnInit { // クラス
+ 　// @Inputデコレーター...プロパティ値がコンポーネントの親から渡される
+　 @Input() product;　// プロパティ
+  constructor() { }
+  ngOnInit() {
+  }
+}
+</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>

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

差分

ページ用ツール