概要
- コンポーネントの組み込み方法
- クラスとテンプレート間のデータ連携
コンポーネントを構成するファイル
- クラス: TypeScript
- テンプレート: HTMLをベースにAngularマークアップを混ぜたもの
- スタイル: CSSなど
ng generate component
: コンポーネント追加
--project
: プロジェクト指定--module
: 所属NgModule- NgModuleの
declarations
配列に追加
- NgModuleの
--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>
テンプレート式
- 補間の
{{ }}
内 - イベント以外のバインディングの
=
の右の引用符内のこと- (注意) イベントバインディングのはテンプレート文
- 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プロパティができる