Staffnet Blog

HOME
Staffnet Blog
Angular2
第6回はじめてのAngular2 ～テンプレート構文～

2016年8月5日 / 最終更新日 : 2016年8月6日 user01 Angular2

第6回はじめてのAngular2 ～テンプレート構文～

テンプレート構文(Template Syntax)

概要

ここまでコンポーネント・クラスが利用するHTMLテンプレートの中に、[(ngModel)]などAngular2独自の拡張構文を記述してきました。しかし、Angular2独特であるため、分かりにくかったかもしれません。今回は、その他の拡張構文を含め、Angular2のテンプレート構文(Template Syntax)を解説します。

[参考]
Angular2公式サイトのTemplate Syntax
https://angular.io/docs/ts/latest/guide/template-syntax.html
templateSyntax

[参考]
Template Syntax(テンプレート構文)早見表
/wp-content/uploads/2016/08/templatesyntax_summary_20160806_2.pdf

テンプレート記述の制限

1)HTML記述の制限
1.以下のHTML要素は利用できません。
script,html,body,base

2)Angular2独自の拡張記述の制限
1.ブラウザのグローバルスコープのオブジェクト(windowやdocument等)は利用できません。例えば、windowオブジェクトから画面幅を取得したり、console.logの出力はできません。該当するコンポーネント・クラスで内で定義されたもののみ利用できます。
2.拡張記述内で以下の演算子は利用できません。
new,++, –, +=, -=, |, &

拡張構文

1.文字列の挿入

構文: {{式}}
機能: 式の結果を文字列として出力します

//value = "Hello!"の時

{{value}}
//出力 => Hello
//-------------------------
//value = 100の時

{{value * 3}}
//出力 => 300
//-------------------------
//getID()の戻り値が"123"の時

あなたのIDは、[[getID()]]です
//出力 => あなたのIDは、123です

2.双方向データバインド

構文: [(ngModel)]=”変数”
機能: データ入力の値とコンポーネント・クラスの変数の値が同期します
補足: 入力機能をもつHTML要素にのみ記述可能、双方向処理のため右辺と左辺を入れ替えた代入ができない[(ngModel)]=”変数 * 3″のような記述はできません

//value = 100の時

<input [(ngModel)="value"]>
//入力欄の表示 => 100
//-------------------------
//value=0
//入力欄に300を入力したとき

<input [(ngModel)="value"]>
//valueの値 => 300

3.リスト表示

構文: *ngFor=”let 一時変数　of 式; let インデックス変数=index”
機能: HTML要素を繰り返し生成します
補足: indexが不要な時は、その記述は不要です
*ngFor=”let 一時変数 of 式”
補足: 表示データの一部のみ変更して再表示する場合は、trackByパラメータの指定で高速化できます。詳細は、NgForTrackByを参照してください。
https://angular.io/docs/ts/latest/guide/template-syntax.html#ngfortrackby

//values = [10,20,30]'の時
<div *ngFor="let v of values; let i=index>
  {{i+1}}番目の値は、{{v}}</div>
//出力 =>
//<div>1番目の値は、10</div>
//<div>2番目の値は、20</div>
//<div>3番目の値は、30</div>

4.HTML要素の表示・非表示

構文: *ngIf=”式”
機能: 式の値がtrueの時は何もしません、false時は指定したHTML要素が削除されます

//value = falseの時

<button *ngif="value" (click)="save($event)">保存</button>
//結果=> button要素が削除されます

5.HTML要素の表示切替え

構文: [ngSwitch]=”式” //条件受け取り
　　　*ngSwitchCase=”‘case1′”//条件がcase1の場合に表示
　　　*ngSwitchCase=”‘case2′”//条件がcase2の場合に表示
　　　*ngSwitchDefault //いずれ条件にも一致しない場合に表示
機能: 複数のHTML子要素から、指定した条件と一致する子要素を残し、その他の子要素を削除します

//value = 'case2'の時
<div [ngSwitch]="value">
	<div *ngSwitchCase="'case1'">red</div>
	<div *ngSwitchCase="'case2'">yellow</div>
	<div *ngSwitchDefault>green</div>
</div>
//結果=> yellowの文字が表示される
//出力=> 
//<div>
//	<div>yellow</div>
//</div>

6.HTML要素のプロパティ指定

構文: [プロパティ名]=”式”
機能: 指定したプロパティに式の値を代入します
補足: プロパティで指定できない属性については、[attr.属性名]=”式”を使用します

//isDisabled = trueの時

<button [disabled]="isDisabled">保存</button>
//結果=> ボタン操作は、無効
//-------------------------
//img01="photo01.jpg"の時

<img [src]="img01">
//結果=> photo01.jpgの表示

7.CSSクラスの追加・削除

構文: [class.クラス名]=”式”
機能: 式の値がtrueの時は指定クラスの追加、falseの時は指定クラスの削除を行います

//isActive = trueの時

<div [class.myClass]="isActive">Hello</div>
//出力=> <div class="myClass">Hello</div>
//-------------------------
//isActive = falseの時

<div [class.myClass]="isActive">Hello</div>
//出力=> <div class="">Hello</div>

8.CSSクラスの複数追加

構文: [ngClass]=”式”
機能: 指定した複数のクラスを追加します

//myClasses = {
//	largeText:true,
//	infoColor:true,
//	solidFrame: false
//}の時

<div [ngClass]="myClasses">Hello</div>
//出力=> <div class="infoColor largeText">Hello</div>

9.CSSスタイルの指定

構文: [style.プロパティ名]=”式”
機能: 指定したスタイルのプロパティを指定します

//value = blueの時

<div [style.color]="value">Hello</div>
//結果=> Helloの文字色は青
//出力=> <div style="color:blue">Hello</div>
//-------------------------
//size = 1.5の時

<div [style.font-size.em]="size">Hello</div>
//結果=> フォントサイズは1.5em
//出力=> <div style="font-size:1.5em">Hello</div>

10.CSSスタイルの複数指定

構文: [ngStyle]=”式”
機能: 指定した複数のスタイルのプロパティを指定します

//myStyle ={
//  'color':      'red',
//  'font-weight': 'bold',
//  'font-size':  '32px' 
//} の時

<div [ngStyle]="myStyle">Hello</div>
//結果=> Helloの文字色は赤、太字、32pxサイズ
//出力=> <div style="color:red; font-weight:bold; font-size:32px">Hello</div>

11.イベント処理

構文: (イベント名)=”式”
機能: 指定したイベントが発生した時、指定した式が呼び出されます。補足: 式の引数に$event変数を指定するとイベントの情報を受け取れます

<button (click)="save($event)">保存</button>
//結果=> 保存ボタンのクリックでsave()メソッドが呼び出されます
//$event変数からイベントの関連情報を取得できます

12.HTML要素の参照取得

構文: #変数名
機能: HTML要素の参照を変数に代入します
この変数を使い、該当要素のメソッド呼び出しや属性の取得ができます
補足: ここで記述する変数は、コンポーネント・クラスでの定義不要でテンプレート内で独自に定義できます

<form method="post" action="/auth" #loginFormElement>
	<input type="text" name="userId">
	<input type="password" name="password">
	<button type="submit"
		(click)="loginFormElement.submit()">
	ログイン
	</button>
</form>

1行目　変数loginFormElementに、form要素の参照を代入します
5行目　loginFormElement.submit()でフォーム内容を送信します

13.パイプの利用

構文: 式 | パイプ名:パラメータ //パイプによってはパラメータなし
機能: 式の値をパイプで変換します
補足: パイプ処理は、式|パイプ1|パイプ2 のように連結できます

//value="aBc"の時
//Angular2の組み込みパイプUpperCasePipeを使用

{{value | uppercase}}
//出力 => ABC

14.プロパティ未定義エラーの回避

構文: オブジェクト名?.プロパティ名
機能: 指定したプロパティが未定義の場合でもエラーが発生しません
補足: Angular2.0.0-rc.4では未定義オブジェクトのプロパティを参照すると例外が発生します

//オブジェクト未定義の時

{{value.length}}
//結果=> 例外発生

{{value?.length}}
//結果=> 何もしない

弊社では、「Angular2とTypeScriptによるモダンWeb開発セミナー」を開催します。
Angular2の実践的な知識とノウハウを習得できます。
/hp/semi/modern/

カテゴリー: Angular2