{{ enumService.getWeekdayName(weekday) }}
Angular2 テンプレートで Enum を渡す
Enum は、一連の関連する値を表すためのデータ型です。例えば、曜日を表す Enum は次のように定義できます。
enum Weekday {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
テンプレートで Enum を渡す方法
Enum をテンプレートに渡すには、以下の 2 つの方法があります。
Enum の値を直接渡す
Enum の値を直接テンプレートに渡すには、{{ }} 構文を使用します。
<h1>{{ Weekday.Monday }}</h1>
このコードは、<h1> タグ内に "Monday" という文字列を出力します。
Enum 変数を渡す
Enum 変数をテンプレートに渡すには、# 記号と変数名を使用します。
<p #weekday>{{ weekday }}</p>
<button (click)="weekday = Weekday.Friday">金曜日にする</button>
このコードは、p タグ内に weekday 変数の値を出力します。button タグをクリックすると、weekday 変数の値が Weekday.Friday に設定されます。
Enum をテンプレートで使用する
テンプレートで Enum を使用するには、以下の 2 つの方法があります。
Enum の値を条件として使用する
Enum の値を条件として使用するには、ngIf ディレクティブを使用します。
<div *ngIf="weekday === Weekday.Friday">
<h1>今日は金曜日です！</h1>
</div>
このコードは、weekday 変数の値が Weekday.Friday の場合のみ、<h1> タグ内の文字列を出力します。
<ul>
<li *ngFor="let day of Weekday">{{ day }}</li>
</ul>
このコードは、Weekday Enum のすべての値をループし、それぞれの値を <li> タグ内にリスト表示します。
enum Weekday {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
weekday = Weekday.Monday;
constructor() {}
}
<h1>{{ Weekday.Monday }}</h1>
<p #weekday>{{ weekday }}</p>
<button (click)="weekday = Weekday.Friday">金曜日にする</button>
<div *ngIf="weekday === Weekday.Friday">
<h1>今日は金曜日です！</h1>
</div>
<ul>
<li *ngFor="let day of Weekday">{{ day }}</li>
</ul>
このコードを実行すると、以下の出力が表示されます。
Monday
Monday
金曜日にする
今日は金曜日です！
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Enum パイプを使用する
Enum パイプを使用すると、Enum の値をテンプレート内で直接フォーマットすることができます。
<h1>{{ weekday | weekdayPipe }}</h1>
このコードは、weekday 変数の値を weekdayPipe パイプを使用してフォーマットし、<h1> タグ内に表示します。
weekdayPipe パイプは、次のように定義できます。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'weekday'
})
export class WeekdayPipe implements PipeTransform {
transform(value: Weekday): string {
switch (value) {
case Weekday.Sunday:
return '日曜日';
case Weekday.Monday:
return '月曜日';
// ...
default:
return value.toString();
}
}
}
このパイプは、Weekday Enum の値を日本語に変換します。
Enum サービスを使用すると、Enum に関する情報をテンプレート内で簡単に利用することができます。
<h1>{{ enumService.getWeekdayName(weekday) }}</h1>
このコードは、enumService サービスを使用して weekday 変数の値に対応する曜日名をテンプレート内に表示します。
enumService サービスは、次のように定義できます。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class EnumService {
constructor() {}
getWeekdayName(weekday: Weekday): string {
switch (weekday) {
case Weekday.Sunday:
return '日曜日';
case Weekday.Monday:
return '月曜日';
// ...
default:
return value.toString();
}
}
}
このサービスは、Weekday Enum の値と曜日名の対応関係を保持しています。
カスタムコンポーネントを使用する
カスタムコンポーネントを使用すると、Enum に関する処理をカプセル化することができます。
<my-weekday [weekday]="weekday"></my-weekday>
このコードは、my-weekday カスタムコンポーネントに weekday 変数を渡します。
my-weekday カスタムコンポーネントは、次のように定義できます。
<template>
<h1>{{ weekdayName }}</h1>
</template>
<script>
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-weekday',
templateUrl: './weekday.component.html',
})
export class WeekdayComponent {
@Input() weekday: Weekday;
get weekdayName(): string {
switch (this.weekday) {
case Weekday.Sunday:
return '日曜日';
case Weekday.Monday:
return '月曜日';
// ...
default:
return this.weekday.toString();
}
}
}
</script>
このコンポーネントは、weekday 変数の値を受け取り、曜日名をテンプレート内に表示します。
Enum をテンプレートで渡す方法はいくつかあります。これらの方法を組み合わせて、テンプレートをより分かりやすく、読みやすくすることができます。
enums angular angular2-template
