Angular を使用して国際化を実装する方法 (詳細なチュートリアル)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Angular を使用して国際化を実装する方法 (詳細なチュートリアル)

亚连

Jun 13, 2018 am 10:06 AM

angularグローバリゼーション

この記事では主に Angular プロジェクトの国際化を実現する方法を紹介しますので、参考にしてください。

angular 公式 Web サイトに記載されているように、プロジェクトの国際化は、多面的な取り組み、継続的な献身と決意を必要とする困難な作業です。
この記事では、静的ファイル (html) の国際化と ts ファイルのコピーライティングを含む、Angular プロジェクトの国際化計画を紹介します。

背景

Angular: 5.0
Angular Cl: 1.6.1 (1.5.x も利用可能)
NG-ZORRO: 0.6.8

Angular i18n

i18n テンプレートの翻訳プロセスには 4 つの段階があります:

コンポーネントテンプレート内で翻訳する必要がある静的テキスト情報をマークします (つまり、i18n タグを追加します)。
Angular の i18n ツールは、タグ付けされた情報を業界標準の翻訳ソースファイル (ng xi18n を使用した .xlf ファイルなど) に抽出します。
翻訳者はファイルを編集し、抽出されたテキスト情報をターゲット言語に翻訳して、ファイルを返します (翻訳者のアクセスが必要です。この記事では、xlf ファイルを使用して json 形式のファイル出力に変換し、最後にjson ファイルを xlf 形式ファイルに変換し直します）。
Angular コンパイラーは、翻訳されたファイルをインポートし、元の情報を翻訳されたテキストに置き換えて、アプリケーションの新しいターゲット言語バージョンを生成します。

翻訳された xlf ファイルを置き換えるだけで、サポートされている言語ごとに個別のプロジェクトバージョンを構築してデプロイできます。

テンプレートファイルで使用するにはどうすればよいですか?

i18n はいくつかの使い方を提供しており、単数と複数の変換方法も提供しています (私は個人的に使ったことがないので不便に感じます)。次に、別の html ファイルを使用して、いくつかの使用方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular i18n</title>
</head>
<body>
  <h1 id="Angular-nbsp-国际化项目">Angular 国际化项目</h1>
  <p>
   <span i18n="@@agDescription">国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。</span>
   <span class="delete" i18n-title="@@agDelete" title="删除"></span>
  </p>
  <p><ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友!</p>
</body>
</html>

上記のコードは、i18n を使用するいくつかの方法を示しています:

1. i18n 属性タグを使用します (説明的なコピーを追加できます。形式は次のようになります: title|description@@id、タイトルと説明は翻訳者が意味をよりよく理解するのに役立ちます)

静的タグに i18n タグを直接タグ付けすることもできます。例えば、

<span i18n="@@agDescription"></span>

によって生成される xlf (xml) フィールドの形式は

<trans-unit id="agDescription" datatype="html">
 <source>国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。</source>
 <context-group purpose="location">
  <context context-type="sourcefile">xxx.ts</context>
  <context context-type="linenumber">linenum</context>
 </context-group>
</trans-unit>

2 です。タイトルに i18n 属性を追加します

HTML タグの属性については、

<span class="delete" i18n-title="@@agDelete" title="删除"></span>

などの i18n を追加することもできます

生成される xlf (xml) 形式は上記と同じです

3. 要素を作成せずにテキストを翻訳します

場合によっては、1 つの文の中に複数の文の区切りがある場合があります。span や label などの要素を追加すると、ページのレイアウトに重大な影響を与える可能性があります。このとき、ng-container を使用して、必要なコピーをラップすることができます。翻訳しました。

<p>
  <ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友!
</p>

はページ上で

<p>
  <!---->
  LET&#39;S GO朋友!
</p>

* として表示されます。これはページのレイアウトには影響しません (特にスタイルが適用されている場合)。

ラベルを付けた後は、ng xi18n を実行するだけです。 xlf ファイル (通常は message.xlf) を自動的に作成します。カスタマイズする必要がある場合は、Angular CLI 公式 Web サイトにアクセスして表示できます。

XLFとJSON変換

xlf to jsonメソッド

私は個人的にxml2jsライブラリを使用して操作します。簡単なコードは次のとおりです:

const fs = require(&#39;fs&#39;);
xml2js = require(&#39;xml2js&#39;);
var parser = new xml2js.Parser();
fs.readFile(fileName, &#39;utf8&#39;, (err, data) => {
 parser.parseString(data, function (err, result) {
  // 读取新文件全部需要翻译的数据，并对比已翻译的进行取舍，具体转换成的格式结构可自行查看
  result[&#39;xliff&#39;][&#39;file&#39;][0][&#39;body&#39;][0][&#39;trans-unit&#39;].forEach((item) => {
   var itemFormat = {
    "key" : item[&#39;$&#39;][&#39;id&#39;],
    "value": item[&#39;source&#39;][0]
   };
   // 执行相关操作，key-value形式是为了统一翻译文件结构，可按需定义
  })
 });
});

json to xlfメソッド

function backToXLF(translatedParams) {
 // 文件格式可自行参考angular.cn官网的例子
 var xlfFormat = {
  "xliff": {
   "$"  : {
    "version": "1.2",
    "xmlns" : "urn:oasis:names:tc:xliff:document:1.2"
   },
   "file": [
    {
     "$"  : {
      "source-language": "en",
      "datatype"    : "plaintext",
      "original"    : "ng2.template"
     },
     "body": [
      {
       "trans-unit": []
      }
     ]
    }
   ]
  }
 };
 if (translatedParams instanceof Array) {
  // 获取原始名称
  translatedParams.forEach((data) => {
   var tmp = {
    "$"   : {
     "id"   : data.key,
     "datatype": "html"
    },
    "source": [i18nItemsOrigin[data.key]], // 这里的i18nItemsOrigin是json格式，属性名为key值，表示原始文案
    "target": [data.value]
   };
   // 数组,json项
   xlfFormat[&#39;xliff&#39;][&#39;file&#39;][0][&#39;body&#39;][0][&#39;trans-unit&#39;].push(tmp);
  });
 }
 var builder = new xml2js.Builder();
 var xml = builder.buildObject(xlfFormat);
 return xml;
}

このようにして、コピー情報は抽出され、翻訳されたファイルが変換されました。完了しました。次に、翻訳されたコピーをプロジェクトに適用する必要があります。

翻訳ファイルをデプロイします

src ディレクトリに新しいロケールフォルダを作成し、変更されたディレクトリに翻訳されたdemo.en-US.xlf ファイルを保存します

app フォルダに新しい i18n-providers.ts を作成します

import {
 LOCALE_ID,
 MissingTranslationStrategy,
 StaticProvider,
 TRANSLATIONS,
 TRANSLATIONS_FORMAT
} from &#39;@angular/core&#39;;
import { CompilerConfig } from &#39;@angular/compiler&#39;;
import { Observable } from &#39;rxjs/Observable&#39;;
import { LOCALE_LANGUAGE } from &#39;./app.config&#39;; // 自行定义配置位置

export function getTranslationProviders(): Promise<StaticProvider[]> {

 // get the locale string from the document
 const locale = LOCALE_LANGUAGE.toString();

 // return no providers
 const noProviders: StaticProvider[] = [];

 // no locale or zh-CN: no translation providers
 if (!locale || locale === &#39;zh-CN&#39;) {
  return Promise.resolve(noProviders);
 }

 // Ex: &#39;locale/demo.zh-MO.xlf`
 const translationFile = `./locale/demo.${locale}.xlf`;

 return getTranslationsWithSystemJs(translationFile)
  .then((translations: string) => [
   { provide: TRANSLATIONS, useValue: translations },
   { provide: TRANSLATIONS_FORMAT, useValue: &#39;xlf&#39; },
   { provide: LOCALE_ID, useValue: locale },
   {
    provide: CompilerConfig,
    useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error })
   }
  ]).catch(() => noProviders); // ignore if file not found
}

declare var System: any;
// 获取locale文件
function getTranslationsWithSystemJs(file: string) {
 let text = &#39;&#39;;
 const fileRequest = new XMLHttpRequest();
 fileRequest.open(&#39;GET&#39;, file, false);
 fileRequest.onerror = function (err) {
  console.log(err);
 };
 fileRequest.onreadystatechange = function () {
  if (fileRequest.readyState === 4) {
   if (fileRequest.status === 200 || fileRequest.status === 0) {
    text = fileRequest.responseText;
   }
  }
 };
 fileRequest.send();
 const observable = Observable.of(text);
 const prom = observable.toPromise();
 return prom;
}

main .ts ファイルを

import { enableProdMode } from &#39;@angular/core&#39;;
import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;

import { AppModule } from &#39;./app/app.module&#39;;
import { environment } from &#39;./environments/environment&#39;;
import { getTranslationProviders } from &#39;./app/i18n-providers&#39;;

if (environment.production) {
 enableProdMode();
}

getTranslationProviders().then(providers => {
 const options = { providers };
 platformBrowserDynamic().bootstrapModule(AppModule, options)
  .catch(err => console.log(err));
});

に変更します。ロケールディレクトリを .angular-cli.json に追加して個別にパッケージ化することを忘れないでください。

このようにして、静的コピーの翻訳は基本的に完了しましたが、ts ファイル内のコピーやサードパーティのフレーム属性など、一部の動的コピーをどのように翻訳すればよいでしょうか?以下に、ts ファイルの動的コピー翻訳のソリューションと NG-ZORRO フレームワークを紹介します。

tsファイルのコピーとNG-ZORROフレームワークのコピー翻訳

具体的なアイデア

Pipe経由でServiceメソッドを呼び出し、対応する一意のID値に従ってjsonオブジェクト内の翻訳結果を照合し、それを先頭に返しますレンダリングについては、NG-ZORRO フレームワークの国際実施計画を参照してください。

まず、3 層構造である json 翻訳オブジェクトの形式を定義します。これは、プロジェクトの構造に関連しており、統合を容易にするためです。後で i18n でフォーマットします。

{
  "app": {
    "base": {
      "hello": "文件文案",
      "userCount": "一共%num%人"
    }
  }
}

フォーマットが決定されましたので、サービス処理メソッドの定義を続けます

ここでは NG-ZORRO の国際化ソリューションが再利用されており、開発を簡素化できます。興味がある場合は、そのソースコードを参照してください。

*** TranslateService ***
import { Injectable } from &#39;@angular/core&#39;;
// 引入语言配置和国际化文件文案对象
import { LOCALE_LANGUAGE } from &#39;../app.config&#39;;
import { enUS } from &#39;../locales/demo.en-US&#39;;
import { zhCN } from &#39;../locales/stream.zh-CN&#39;;

@Injectable()
export class TranslateService {

 private _locale = LOCALE_LANGUAGE.toString() === &#39;zh-CN&#39; ? zhCN : enUS;

 constructor() {
 }
 // path为app.base.hello格式的字符串,这里按json层级取匹配改变量
 translate(path: string, data?: any): string {
  let content = this._getObjectPath(this._locale, path) as string;
  if (typeof content === &#39;string&#39;) {
   if (data) {
    Object.keys(data).forEach((key) => content = content.replace(new RegExp(`%${key}%`, &#39;g&#39;), data[key]));
   }
   return content;
  }
  return path;
 }

 private _getObjectPath(obj: object, path: string): string | object {
  let res = obj;
  const paths = path.split(&#39;.&#39;);
  const depth = paths.length;
  let index = 0;
  while (res && index < depth) {
   res = res[paths[index++]];
  }
  return index === depth ? res : null;
 }
}

このように、Pipe の Service の translation メソッドを呼び出すだけで済みます

*** NzTranslateLocalePipe ***
import { Pipe, PipeTransform } from &#39;@angular/core&#39;;
import { TranslateService } from &#39;../services/translate.service&#39;;

@Pipe({
 name: &#39;nzTranslateLocale&#39;
})
export class NzTranslateLocalePipe implements PipeTransform {
 constructor(private _locale: TranslateService) {
 }

 transform(path: string, keyValue?: object): string {
  return this._locale.translate(path, keyValue);
 }
}

さて、処理ロジックは完全に終わりました。使い方を紹介しましょう

*** NG-ZORRO 控件 ***
<nz-input [nzPlaceHolder]="&#39;app.base.hello&#39;|nzTranslateLocale"></nz-input> // 无动态参数
<nz-popconfirm [nzTitle]="&#39;app.base.userCount&#39;|nzTranslateLocale: {num:users.length}" ...>
... // 有动态参数
</nz-popconfirm>

*** ts文件 ***
export class AppComponent implements OnInit {
 demoTitle=&#39;&#39;;
 users = [&#39;Jack&#39;, &#39;Johnson&#39;, &#39;Lucy&#39;];
 constructor(privete translateService: TranslateService) {
 }
 ngOnInit() {
  this.demoTitle = this.translateService.translate(&#39;app.base.hello&#39;);
 }
}

上記のプロセスは、基本的にほとんどの Angular プロジェクトを満たすことができます国際化の必要性。より複雑な国際化が必要な場合は、議論を歓迎します。

まとめ

Angular の 5.0 への国際化は比較的簡単で、適切な場所に i18n をタグ付けするだけで、翻訳されたファイルの処理方法は人によって異なります。変換にはさまざまな方法が役立ちます (nodejs を使用したこの記事など)。

さらに複雑なのは、i18n タグを入力しても翻訳できないテキストです。NG-ZORRO の国際化ソリューションはこの欠点を補っており、組み合わせることでプロジェクトの国際化を簡単に完了できます。国際化のための専任チームのサポートがないと翻訳は非常に難しく、繁体字中国語、マカオ繁体字中国語、台湾繁体字中国語など考慮すべき点が多く、文法も異なります。

リファレンスディレクトリ

Angularの国際化(i18n)オンラインサンプル
NG-ZORROロケール国際化

上記は、将来皆さんのお役に立てれば幸いです。

JQueryを使ったフォームバリデーションの実装方法、具体的に何をすればいいのか？

Vueを使用して複数のクラスを設定する方法

SpringMVCで投稿内の複数選択ボックスの値を取得する方法(コード例)

SpringMVC_jqueryでのjQuery+Checkboxの選択と値の受け渡しの例

以上がAngular を使用して国際化を実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles