猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Angular入門_はじめてのアプリ ======

[[https://angular.jp/start|Angular入門_はじめてのアプリ]]

===== *ngForディレクティブ =====
<code javascript>
<div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
  <h3>
    {{product.name}}
  </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細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール
