Angularテンプレートのリファレンス
データバインディングやngIfおよびngFor組み込みディレクティブなど、さまざまなAngularテンプレート構文の概念の多くについて説明しました。 ここでは、簡単に参照できるように、構文のさまざまな可能性を要約する機会を利用します。
この投稿では、Angular2+のテンプレート構文について説明します
インラインと個別のファイルテンプレート
テンプレートには、セキュリティ上の理由から、 script タグを除いて、ほとんどすべての通常のHTMLを含めることができます。 コンポーネントクラスと同じファイルにインラインでテンプレートを定義できます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>I'm a template!</h1>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {}
}
…または、テンプレートを個別のファイルで定義できます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {}
}
<h1>I'm a template!</h1>
これは主に好みの問題であり、インラインテンプレートは多くの場合、小さなコンポーネントに最適です。
データバインディング
テンプレートに関してAngularの力の核となるのは、コンポーネントクラスのデータにバインドする機能、またはイベントにバインドする機能です。 データバインディングは、必要なフレーバーに応じて異なる方法で実行されます。
補間
コンポーネントの値を代入するには、補間バインディングを使用します。
<span>User name: {{ name }}</span>
補間構文は、式を評価することもできます。 以下はHelloyouを出力します。
<span>
Hello {{ 1 + 1 === 3 ? 'me' : 'you' }}
</span>
補間式で使用できる3つの新しい演算子があります。
- 安全なナビゲーション演算子、 ?. は、nullまたは未定義のオブジェクトの値にアクセスしようとした場合にJavaScriptエンジンが文句を言うのを防ぎます。 アクセスしようとしているプロパティがnullまたは未定義の値である場合、エラーを発生させるのではなく、ステートメントは単に無視されます。
{{ user?.preferences?.avatar }}
- パイプ演算子、 | を使用すると、補間された値をパイプに渡すことができます。パイプは、組み込みまたはのいずれかです。 ]独自のカスタムパイプ:
{{ user?.name | uppercase }}
- 非ヌルアサーション演算子、 !. は、nullまたは未定義の値が検出された場合にエラーアウトしないようにTypeScriptタイプチェッカーに通知します。 これは、TypeScriptに –strictNullChecksフラグを使用している場合にのみ使用してください。
{{ user!.preferences!.nickName | uppercase }}
値を変更したり、副作用のある式を使用することはできません。 たとえば、補間された式で変数を割り当てることはできません。
プロパティバインディング
コンポーネントのデータを要素のプロパティにバインドできます。 たとえば、ここで user は、nameプロパティを持つコンポーネントクラスのオブジェクトであるとします。
<input type="text" [value]="user.name">
イベントバインディング
(event)=“ method()” 構文を使用して、ユーザーイベントをコンポーネントクラスのメソッドにバインドします。
<button type="button" (click)="showProfile()">View Profile</button>
双方向バインディング
テンプレートからコンポーネントに、またコンポーネントからテンプレートにデータを流す場合は、双方向バインディングを使用できます。
<input type="text" [(ngModel)]="user.name">
これにより、入力の値の変更はユーザーオブジェクトのnameプロパティに反映され、コンポーネントに user.name の値を変更するメソッドがある場合、結果も入力に反映されます。自動的。
双方向のデータバインディング構文を使用するには、ルートモジュールにFormsModuleをインポートする必要があることに注意してください。
スタイルとクラスのバインド
テンプレートのスタイルまたはクラスにバインドするには、主に4つの方法があります。
スタイルプロパティバインディング
通常のプロパティバインディング構文を使用して、特定のスタイルプロパティの値を定義できます。
<span [style.background-color]="'pink'">{{ user.name }}</span>
…または、次のようなものを使用して、コンポーネントの値にバインドできます。
<span [style.background-color]="user.color">{{ user.name }}</span>
ngStyle属性ディレクティブ
ngStyle 属性ディレクティブを使用して、一度に複数のスタイルプロパティを適用できます。
<p [ngStyle]="userStyles">
{{ user.name }}
</p>
そして、ここでコンポーネントのuserStyleは次のようになります。
userStyles = {
backgroundColor: 'papayawhip',
border: '2px solid #666',
width: '50%',
margin: '0 auto',
textAlign: 'center',
padding: '2rem'
};
クラスプロパティバインディング
スタイルプロパティバインディングに似ていますが、式がtrueと評価された場合にクラスを適用します。 この例では、ユーザーオブジェクトにcolorプロパティがある場合、spanのクラスはhighlightになります。
<span [class.highlight]="user.color">{{ user.name }}</span>
ngClass属性ディレクティブ
ngStyle属性ディレクティブに似ており、一度に複数のクラスを設定できます。
<p [ngClass]="setClasses()">
{{ user.name }}
</p>
そして、コンポーネントクラスでは:
setClasses() {
const classes = {
'has-avatar': this.user.avatar,
'new-user': this.user.newUser,
bg: this.user.preferences.color
};
return classes;
}
ngClass が期待するオブジェクトのプロパティ名は、その値がtrueと評価された場合、適用されるクラス名になります。
テンプレートリファレンス
要素がテンプレート内から他の要素にアクセスできるようにするために、テンプレート参照変数と呼ばれる要素上に参照変数を作成できます。 #記号の後に一意の識別子名を付けるだけです。
<input type="text" #color placeholder="Hex color value">
<button (click)="printValue(color.value)">
Show color
</button>
パイプ
パイプを使用して、補間された値に対して単純な変換を行います。 以下は、2017年8月8日火曜日のような形式で日付値を保持するプロパティをフォーマットします。
<span>
Published: {{ publishedDate | date:'fullDate' }}
</span>
構造指令
Angularは、DOMの要素に影響を与える3つの組み込みの構造ディレクティブを提供します。
ngIf
ngIf ディレクティブに渡された式がtrueと評価された場合、要素はDOMに追加され、それ以外の場合はDOMから削除されます。
<span *ngIf="publishedDate">
Published: {{ publishedDate | date:'fullDate' }}
</span>
Angular 4以降、式がfalseと評価された場合に使用されるテンプレートへの参照を使用してelse句を定義することもできます。
<span *ngIf="publishedDate; else noPublishedDate">
Published: {{ publishedDate | date:'fullDate' }}
</span>
<ng-template #noPublishedDate>
😿 No published date
</ng-template>
ngFor
テンプレートのforループのように、 ngFor は配列内の値を反復処理し、各アイテムにアタッチされている要素のコピーを作成します。 この例では、 users は、コンポーネントクラスで使用できるユーザーオブジェクトの配列です。
<ul>
<li *ngFor="let user of users">
name: {{ user.name }}, email: {{ user.email }}
</li>
</ul>
indexをx構文として使用して反復インデックスを取得することもできます。
<ul>
<li *ngFor="let user of users; index as i">
{{ i + 1 }}- name: {{ user.name }}, email: {{ user.email }}
</li>
</ul>
ngSwitch
複数の可能な値が評価されるswitchステートメントと同等ですが、テンプレートの場合は次のようになります。
<div [ngSwitch]="user.gender">
<span *ngSwitchCase="'m'">Male</span>
<span *ngSwitchCase="'f'">Female</span>
<span *ngSwitchDefault>Not provided</span>
</span>