差分

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

--- angular:angular入門_はじめてのアプリ [2019/11/13 21:30]
ips 作成
+++ angular:angular入門_はじめてのアプリ [2019/11/14 06:44] (現在)
ips [親から子コンポーネントへのデータの受け渡し]
@@ ライン 3: / ライン 3: @@
 [[https://angular.jp/start|Angular入門_はじめてのアプリ]]
-===== *ngFor =====
+===== *ngForディレクティブ =====
 <code javascript>
 <div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
@@ ライン 10: / ライン 10: @@
   </h3>
 </div>
+</code>
+===== 補間構文 {{ }} =====
+<code javascript>
+<div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
+  <h3>
+    {{product.name}} // プロパティの値をテキストとしてレンダリングします
+  </h3>
+</div>
+</code>
+===== プロパティバインディング [] 構文 =====
+[]でhtmnlタグのプロパティをバインディングできる
+<code javascript>
+<h2>Products</h2>
+<div *ngFor="let product of products">
+  <h3>
+    <a [title]="product.name + ' details'"> //"~"の部分はバインディングしている。
+                                            // 文字列だけなら<a [title]="'details'"> となる
+    {{product.name}}
+    </a>
+  </h3>
+</div>
+</code>
+===== *ngIfディレクティブ =====
+<code javascript>
+  <p *ngIf="product.description">
+    Description:{{product.description}}
+  </p>
+</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細胞研究所

ユーザ用ツール

サイト用ツール

差分

ページ用ツール