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 i18n="Site Header|An introduction header for i18n Project@@stTitle">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>
生成される xlf (xml) 形式は上記と同じです
3. 要素を作成せずにテキストを翻訳します
場合によっては、1 つの文の中に複数の文の区切りがある場合があります。span や label などの要素を追加すると、ページのレイアウトに重大な影響を与える可能性があります。このとき、ng-container を使用して、必要なコピーをラップすることができます。翻訳しました。
<p> <ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友! </p>
はページ上で
<p> <!----> LET'S GO朋友! </p>
* として表示されます。これはページのレイアウトには影響しません (特にスタイルが適用されている場合)。
ラベルを付けた後は、ng xi18n を実行するだけです。 xlf ファイル (通常は message.xlf) を自動的に作成します。カスタマイズする必要がある場合は、Angular CLI 公式 Web サイトにアクセスして表示できます。
XLFとJSON変換
xlf to jsonメソッド
私は個人的にxml2jsライブラリを使用して操作します。簡単なコードは次のとおりです:
const fs = require('fs');
xml2js = require('xml2js');
var parser = new xml2js.Parser();
fs.readFile(fileName, 'utf8', (err, data) => {
parser.parseString(data, function (err, result) {
// 读取新文件全部需要翻译的数据，并对比已翻译的进行取舍，具体转换成的格式结构可自行查看
result['xliff']['file'][0]['body'][0]['trans-unit'].forEach((item) => {
var itemFormat = {
"key" : item['$']['id'],
"value": item['source'][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['xliff']['file'][0]['body'][0]['trans-unit'].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 '@angular/core';
import { CompilerConfig } from '@angular/compiler';
import { Observable } from 'rxjs/Observable';
import { LOCALE_LANGUAGE } from './app.config'; // 自行定义配置位置
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 === 'zh-CN') {
return Promise.resolve(noProviders);
}
// Ex: '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: 'xlf' },
{ 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 = '';
const fileRequest = new XMLHttpRequest();
fileRequest.open('GET', 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 '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { getTranslationProviders } from './app/i18n-providers';
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 '@angular/core';
// 引入语言配置和国际化文件文案对象
import { LOCALE_LANGUAGE } from '../app.config';
import { enUS } from '../locales/demo.en-US';
import { zhCN } from '../locales/stream.zh-CN';
@Injectable()
export class TranslateService {
private _locale = LOCALE_LANGUAGE.toString() === 'zh-CN' ? 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 === 'string') {
if (data) {
Object.keys(data).forEach((key) => content = content.replace(new RegExp(`%${key}%`, 'g'), data[key]));
}
return content;
}
return path;
}
private _getObjectPath(obj: object, path: string): string | object {
let res = obj;
const paths = path.split('.');
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 '@angular/core';
import { TranslateService } from '../services/translate.service';
@Pipe({
name: 'nzTranslateLocale'
})
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]="'app.base.hello'|nzTranslateLocale"></nz-input> // 无动态参数
<nz-popconfirm [nzTitle]="'app.base.userCount'|nzTranslateLocale: {num:users.length}" ...>
... // 有动态参数
</nz-popconfirm>
*** ts文件 ***
export class AppComponent implements OnInit {
demoTitle='';
users = ['Jack', 'Johnson', 'Lucy'];
constructor(privete translateService: TranslateService) {
}
ngOnInit() {
this.demoTitle = this.translateService.translate('app.base.hello');
}
}上記のプロセスは、基本的にほとんどの Angular プロジェクトを満たすことができます国際化の必要性。より複雑な国際化が必要な場合は、議論を歓迎します。
まとめ
Angular の 5.0 への国際化は比較的簡単で、適切な場所に i18n をタグ付けするだけで、翻訳されたファイルの処理方法は人によって異なります。変換にはさまざまな方法が役立ちます (nodejs を使用したこの記事など)。
さらに複雑なのは、i18n タグを入力しても翻訳できないテキストです。NG-ZORRO の国際化ソリューションはこの欠点を補っており、組み合わせることでプロジェクトの国際化を簡単に完了できます。 国際化のための専任チームのサポートがないと翻訳は非常に難しく、繁体字中国語、マカオ繁体字中国語、台湾繁体字中国語など考慮すべき点が多く、文法も異なります。
リファレンスディレクトリ
Angularの国際化(i18n)オンラインサンプル
NG-ZORROロケール国際化
上記は、将来皆さんのお役に立てれば幸いです。
関連記事:
JQueryを使ったフォームバリデーションの実装方法、具体的に何をすればいいのか？
SpringMVCで投稿内の複数選択ボックスの値を取得する方法(コード例)
SpringMVC_jqueryでのjQuery+Checkboxの選択と値の受け渡しの例
以上がAngular を使用して国際化を実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7488
15
1377
52
77
11
19
40
Ubuntu 24.04 に Angular をインストールする方法
Mar 23, 2024 pm 12:20 PM
Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために
Gin フレームワークを使用して国際化および多言語サポート機能を実装する
Jun 23, 2023 am 11:07 AM
グローバル化の進展とインターネットの普及に伴い、さまざまな人々のニーズを満たすために、ますます多くの Web サイトやアプリケーションが国際化や多言語サポート機能の実現に努め始めています。これらの機能を実現するには、開発者はいくつかの高度なテクノロジーとフレームワークを使用する必要があります。この記事では、Gin フレームワークを使用して国際化と多言語サポート機能を実装する方法を紹介します。 Gin フレームワークは、Go 言語で書かれた軽量の Web フレームワークです。効率的で使いやすく、柔軟性が高いため、多くの開発者にとって好ましいフレームワークとなっています。その上、
FastAPI フレームワークを使用して国際的な Web アプリケーションを構築する
Sep 29, 2023 pm 03:53 PM
FastAPI フレームワークを使用して国際的な Web アプリケーションを構築します。FastAPI は、Python 型の注釈と高性能の非同期サポートを組み合わせた高性能 Python Web フレームワークで、Web アプリケーションの開発をよりシンプル、高速、信頼性の高いものにします。国際的な Web アプリケーションを構築する場合、FastAPI は、アプリケーションで複数の言語を簡単にサポートできるようにする便利なツールと概念を提供します。以下に、FastAPI フレームワークを使用してビルドする方法を紹介する具体的なコード例を示します。
フロントエンド開発に PHP と Angular を使用する方法
May 11, 2023 pm 04:04 PM
インターネットの急速な発展に伴い、フロントエンド開発テクノロジーも常に改善され、反復されています。 PHP と Angular は、フロントエンド開発で広く使用されている 2 つのテクノロジーです。 PHP は、フォームの処理、動的ページの生成、アクセス許可の管理などのタスクを処理できるサーバー側スクリプト言語です。 Angular は、単一ページ アプリケーションの開発やコンポーネント化された Web アプリケーションの構築に使用できる JavaScript フレームワークです。この記事では、PHPとAngularをフロントエンド開発に使用する方法と、それらを組み合わせる方法を紹介します。
Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について
Mar 15, 2024 pm 04:51 PM
Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネント スタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。
Angular と Node を使用したトークンベースの認証
Sep 01, 2023 pm 02:01 PM
認証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認証システムと、それが従来のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従来の認証システム トークンベースの認証システムに進む前に、従来の認証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを実行してバックエンドでユーザーを認証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。
PHP8.0の国際化ライブラリ
May 14, 2023 pm 05:51 PM
PHP8.0 の国際化ライブラリ: UnicodeCLDR および Intl 拡張 グローバリゼーションのプロセスに伴い、言語や地域を超えたアプリケーションの開発がますます一般的になりました。国際化はこの目標を達成するために重要な部分です。 PHP8.0 では、UnicodeCLDR および Intl 拡張機能が導入され、どちらも開発者により優れた国際化サポートを提供します。 UnicodeCLDRUnicodeCLDR(CommonLocaleDat
PHP を使用した多言語 Web サイトの構築: 言語の壁を取り除く
Feb 19, 2024 pm 07:10 PM
1. 次のフィールドを含む、多言語データ用の新しいテーブルを作成するデータベースを準備します: CREATETABLEtranslations(idINTNOTNULLAUTO_INCREMENT,localeVARCHAR(255)NOTNULL,keyVARCHAR(255)NOTNULL,valueTEXTNOTNULL,PRIMARYKEY(id)); 2. 言語切り替えメカニズムを設定します。 Web サイト上で言語スイッチャーをトップまたはサイドバーに追加して、ユーザーが好みの言語を選択できるようにします。 // 現在の言語を取得 $current_locale=isset($_GET["locale"])?$_
