使用ngx-translate的技巧

1 年 ago

韵, 科

2 minutes

听说在Angular中进行国际化时，似乎ngx-translate是一个不错的选择。

关于Angular的国际化（i18n）

在Angular中，官方提供了i18n功能，并且Angular CLI也提供了生成字典文件的命令，官方对此的支持非常全面。
（即使在使用angular i18n进行Google搜索时，官方文档也是最受欢迎的搜索结果）
因此，首先我们往往会尝试使用它。
我之前也使用过官方的i18n功能来实现应用程序的多语言化，但是当时我注意到以下几个问题。

Angularのi18nを使用する場合、Angular CLIが提供する ng i18nコマンドを使って辞書ファイルの作成が行なえますが更新操作がなく都度作り直す必要があります

htmlタグに直接記述、テンプレートシンタックスを使って表示した変数以外への対応

具体的には以下のようなユースケース

component classから chartライブラリにラベル文字列を入力する
service classAngular MaterialのSnackbarのようなAPIを呼び出す

我完全同意《闘うITエンジニアの覚え書き》中对于Angular国际化的两种方法进行比较的评论。

ngx-translate 可以翻译为：“ngx-translate”

我认为在Angular的i18n之后，ngx-translate可能是一个选择。它的文档内容丰富，所以我们很容易地进行了设置和基本用法的介绍。

从个人角度来看，我认为选择由Angular团队开发的具有全栈功能的官方解决方案是一个不错的选择。然而，在国际化方面，选择使用ngx-translate可能会让人感到更满意。

在这篇文章中，我想介绍一些在使用这个库时容易搜索的关键点。

对各种模式的响应

假设在已经将Angular项目引入的情况下，假设有一个名为en.json的词典文件，内容如下所示。

{
    "ログイン": "Member Login / Sign In",
    "認証情報を入力してください": "Input Your Accout Information",
    "ログインID": "User ID",
    "パスワード": "Password",
    ...
}

最基本的的模式

在将直接在HTML标签中输入的字符串进行翻译的模式中，只需要在标签中添加translate指令，如下所示。

<h2 class="title" translate>ログイン</h2>
<p class="caption" translate>認証情報を入力してください</p>

按钮 àn)

如果要对html标签中的button进行翻译，仅仅简单地添加translate指令是无法进行翻译的。

<button class="button" (click)="login()" translate>ログイン</button>

通过使用span等内联元素来包装翻译部分，也可以支持button等的功能。

<button class="button" (click)="login()"><span translate>ログイン</span></button>

占位符等HTML属性

使用插值，将`translate`作为管道来使用，可以翻译占位符的HTML属性。

<input type="text" matInput placeholder="{{ 'ログインID' | translate }}">

服务或组件的模型文本

以下是列舉在第一項所提到的類似用例：

以下是具体的一些用例：

1. 将标签字符串输入到图表库中的组件类。
2. 调用类似Angular Material的Snackbar的服务类API。

通过使用ngx-translate提供的TranslateService的instant()方法，您可以轻松地从service或component的model部分获取已翻译的字符串。

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

@Injectable({
  providedIn: 'root',
})
export class NotificationService {
  constructor(private readonly snackBar: MatSnackBar, private readonly translateService: TranslateService) {}

  add(message: string): void {
    this.openSnackBar(message);
  }

  addWithDismiss(message: string): void {
    this.openSnackBar(message, this.translateService.instant('閉じる'));
  }

  private openSnackBar(message: string, action?: string): void {
    const option: MatSnackBarConfig = {
      horizontalPosition: 'right',
      verticalPosition: 'bottom',
    };

    if (!action) {
      option.duration = 2000;
    }

    const translatedMessage = this.translateService.instant(message);
    this.snackBar.open(translatedMessage || message, action, option);
  }
}

请参考

https://github.com/ngx-translate/core 可翻译的核心
https://angular.io/guide/i18n Angular 国际化指南
https://www.magata.net/memo/index.php?Angular%A4%C7%B9%F1%BA%DD%B2%BD%C2%D0%B1%FE Angular开发备忘录