概要

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

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

• クラス: 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マークアップ

• 補間: {{テンプレート式}}
• プロパティバインディング: [DOMプロパティ]="テンプレート式"
• イベントバインディング: (イベント)="テンプレート文"
• 条件付き要素: *ngIf="条件文"、
• 要素の繰り返し: *ngFor="let 要素 of 配列"

補間

{{テンプレート式}}

<span>{{ property }} <= クラスのプロパティを参照</span>

テンプレート式: JavaScript式の一部を使える

• 参照や関数実行、+演算子など

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

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

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

クラスバインディング

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

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

• テンプレート式の値はtrue|false

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

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

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

<span class="クラス1 クラス2"></span>

スタイルバインディング

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

<span [style.スタイル]="property"></span>

• スタイル例: font-size、fontSize(キャメルケース)、font-size.em(単位付き)

<span [style]="スタイル表現"></span>

• スタイル表現例: font-size: 1.5em; color: red
• ObjectやArrayも可

イベントバインディング

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

<button (click)="foo = 'abc'; bar = 1">クリック</button>

• テンプレート式ではない
• (イベント)はon-イベントでも可

テンプレート文

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

テンプレート参照変数

#変数

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

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

構造ディレクティブ

• どちらも引用符内はテンプレート式ではない

*ngIf="条件文"

• 条件付き要素

<span *ngIf="x">xがtrueならDOMに要素追加</span>

*ngFor="let 要素 of 配列"

• 要素の繰り返し

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

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

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

• HTML属性とDOMプロパティの混同に注意
• nullで属性削除

テンプレート式

• 補間の{{ }}内、イベント以外のバインディングの=の右の引用符内のこと
  • (注意) イベントバインディングのはテンプレート文
• JavaScript式に似ているが、全部は使えない

主な式

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

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

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

親から子へデータを渡す

子クラス: @Inputデコレートしたプロパティ

@Input uniqueName
@Input('child-property') property // 親から見える名前を変えるとき
@Input sample

親テンプレート: 子セレクタでプロパティバインディングなどする

<子セレクタ [uniqueName]="parentProperty"
 [child-property]="parentProperty"
 sample="これは固定値を渡している"></子セレクタ>

子のイベントを親へ伝える

子クラス: @OutputデコレートしたEventEmitterをemit()

@Output('child-event') event = new EventEmitter<string>() // stringを渡す場合
send(value) {
  this.event.emit(value) // イベント発生
}

子テンプレート: イベントバインディングなど

<input #input>
<button (click)="send(input.value)">入力文字列を親に送信</button>

親テンプレート: 子セレクタでイベントバインディングし、$eventで受け取る

<子セレクタ (child-event)="fromChild = $event"></子セレクタ>
<p>子から受信: {{fromChild}}</p>

• テンプレート文の$eventオブジェクトで子から受信できる