Angular 9 で導入されたグローバルな $localize() 関数とは？

$localize() 関数の利点

• コードの簡潔化
• より自然なテンプレート記述

<p>ようこそ、{{ name }} さん！</p>

{
  "WELCOME": "ようこそ、{{ name }} さん！"
}

$localize() 関数を利用するには、以下の手順が必要です。

1. @angular/localize パッケージをインストールする。
2. polyfills.ts ファイルに import '@angular/localize'; を追加する。

<p>ようこそ、{{ $localize('WELCOME', { name: user.name }) }} さん！</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {
    name: '田中 太郎'
  };
}

messages.json

{
  "WELCOME": "ようこそ、{{ name }} さん！"
}

app.component.ts ファイルでは、user というオブジェクトを定義し、その中に name というプロパティにユーザーの名前を設定しています。

• 欠点

ICU メッセージフォーマットを使用する

• 欠点

カスタムパイプを使用する

• 欠点
• 利点

どの方法を選択すべきか

どの方法を選択するかは、プロジェクトの要件や開発者のスキルによって異なります。

• 完全な柔軟性が必要であれば、カスタムパイプを使用しましょう。

以下は、各方法の比較表です。