概要

• コンポーネントの組み込み方法
• クラスとテンプレート間のデータ連携

コンポーネントを構成するファイル

• クラス: TypeScript
• テンプレート: HTMLをベースにAngularマークアップを混ぜたもの
• スタイル: CSSなど

ng generate component: コンポーネント追加

• --project: プロジェクト指定
• --module: 所属NgModule
  • NgModuleのdeclarations配列に追加
• --dry-run: 書込せず、どうなるか表示だけ
• --flat: src/app/下に直接ファイル作成(ディレクトリ挟まず)
• --skip-tests: テスト用ファイル*.component.spec.tsを作らない

例

component=new-page
ng generate component $component --project $PROJECT

• src/app/new-page/
  • クラス: new-page.component.ts
  • テンプレート: new-page.component.html
  • スタイル: new-page.component.css

• クラス名はNewPageComponent、セレクタはapp-new-page
• テンプレートとスタイルのファイルパス: @ComponentデコレータのtemplateUrlとstyleUrls

コンポーネントの組み込み方法

ルーティングモジュール使用

• 当該URLパスのとき、<router-outlet></router-outlet>の部分に当該コンポーネント表示

セレクタ使用

• コンポーネントを指し示すセレクタ名: @Componentデコレータのselector
• 親テンプレート内に<子セレクタ></子セレクタ>で組み込める
• (AppComponentだけsrc/index.htmlにある)

Angularマークアップ

テンプレートでHTMLに加えて記述

クラスとテンプレート間で、リアルタイムのデータ連携などができる。

• 補間: {{テンプレート式}}

• プロパティバインディング: [DOMプロパティ]="テンプレート式"
• クラスバインディング: [class.クラス]="テンプレート式"
• スタイルバインディング: [style.スタイル]="テンプレート式"

• イベントバインディング: (イベント)="テンプレート文"

• テンプレート参照変数: #変数

構造ディレクティブ

• 条件付き要素: *ngIf="条件"、
• 要素の繰り返し: *ngFor="let 変数 of 配列"

補間

{{テンプレート式}}

• クラスのプロパティ値を挿入
• リアルタイムに反映(他も同様)

<span>{{ property }}</span>

テンプレート式

1. 補間の{{ }}内
2. イベント以外のバインディングの=の右の引用符内のこと
   • (注意) イベントバインディングのはテンプレート文

• JavaScript式に似ているが、全部は使えない

主な式

• 単なる参照: property
  • undefinedやnullの表示は空
• 関数: func()
• +演算子: property + 1
• 三項演算子: trueProperty ? '真' : '偽'

コンパイルエラーになるもの

• 日本語名
  • クラス側単独で使用できるが、テンプレートからの参照でエラー
• privateメンバ、宣言していないメンバ、グローバルオブジェクト(windowなど)
• 代入、;での区切り、インクリメント、ビット演算
• new、typeof、instanceofなど

プロパティバインディング

[DOMプロパティ]="テンプレート式"

<a [href]="property">リンク</a>

静的な属性のとき (バインディングではない)

<a href="https://example.com">リンク</a>

• 各種バインディングは動的なデータ連携のとき使う

クラスバインディング

[class.クラス]="テンプレート式"

trueのとき、クラス適用

<span [class.クラス]="property"></span>

クラス名を指定する場合

<span [class]="property"></span>

• string: 'クラス1 クラス2'
• Object: {クラス1: true, クラス2: false}
• Array: ['クラス1', 'クラス2']

スタイルバインディング

[style.スタイル]="テンプレート式"

値のみ指定する場合

<span [style.font-size]="property"></span>

• キャメルケース(fontSize)や単位付き(font-size.em)も可

スタイル名と値の組み合わせの場合

<span [style]="property"></span>

• string例: font-size: 1.5em; color: red
• ObjectやArrayも可

イベントバインディング

(イベント)="テンプレート文"

• イベント発生でテンプレート文(式ではない)実行
• DOMイベント以外にカスタムイベント(EventEmitterクラス)も可
• (イベント)はon-イベントでも可

<div (click)="foo = 'abc'; myEvent($event)">クリック</div>

$eventオブジェクト

• テンプレート文でDOMのイベントオブジェクトを参照
  • クラスに渡して操作
  • ただし単に値を取得などはテンプレート参照変数の方がよい
• EventEmitterならその値

テンプレート文

• テンプレート式と少し異なり、=による代入、;で区切った連続の式も使える

テンプレート参照変数

#変数

<input type="text" #myinput (keyup)="send(myinput.value)">
<p>{{myinput.value}}</p>

• テンプレートのどこからでも参照できる
• クラスのプロパティとは関係ない(名前の重複はテンプレート変数が優先)
• #の代わりにref-も可

条件付き要素

*ngIf="条件"

• true同等ならDOMに要素追加 (単に非表示ではない)

<span *ngIf="property">内容</span>

要素の繰り返し

*ngFor="let 変数 of 配列"

• Array型のクラスプロパティを反映させるとき

<ol><li *ngFor="let e of property">{{ e }}</li></ol>

• let 変数: ループ内のみ有効なテンプレート入力変数

属性バインディング(例外的使用)

• 通常はプロパティバインディングを使用

[attr.HTML属性]="テンプレート式"

• HTML標準の属性: 対応するDOMプロパティができる