web-dev-qa-db-ja.com

Angular 4 i18n-翻訳ファイルを追加した後どうすればいいですか？

私はAngular 4アプリ。基本的に私は 公式ガイド に従いました。

  1. I18n属性をタグなどに追加しました

  2. Angular-cliはmessages.xlfを作成しました

  3. Src-folderに「locale」フォルダを作成しました

  4. Messages.xlfをこのロケールフォルダーにコピーしました...

  5. ...そして、「messages。de。xlf」に名前を変更して、ドイツ語の翻訳を保持しました

簡単な翻訳を変更してテストしました。ただし、ブラウザを「ドイツ語」に切り替えた後、違いはありませんでした（npm startを使用したため、基本的に「ng serve」）。まだ足りないものがあるようです。また、ガイドでは 翻訳を「マージ」する方法 について説明しています。しかし、この章は信じられないほど奇妙で、説得力のあるものではありません。以前のバージョンで行われたようです。

たとえば、スタートアップスクリプトを適合させるように記述されています。問題は、起動スクリプトさえ持っていないことです。私のindex.htmlは次のようになります：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PickUp2</title>
  <base href="/">

  <link href="assets/iconfont/material-icons.css" rel="stylesheet">
  <link href="roboto.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/material_supply_icon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

この起動スクリプトをどこに配置する必要がありますか？ JITコンパイラを使用するのかAOTコンパイラを使用するのかさえわかりません。それらは、以前はどのガイドでも言及されていませんでした。

angularinternationalization
19
OddDev

クックブックに記載されている方法で、Angular-4アプリを翻訳しました。不足している重要な情報は、各言語のアプリを個別に「ビルド」する必要があると思います。

1つの翻訳でアプリをローカルで実行する私のコマンドは次のようになります。

>ng serve --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot

ビルドするには、ng serveをng buildに置き換えるだけです

説明：

  • -i18n-fileは、使用する変換を指定します
  • --aotはhtmlテンプレートの事前コンパイルであり、i18nとマークされたテキストを翻訳に置き換えます。

そのため、あなたの場合、アプリをドイツ語でビルドしてから、たとえば-deフォルダーに展開します。アプリの別のバージョンは/ enなどにあります。

次に、ユーザーが使用したい言語に基づいて専用アプリにリダイレクトできます。

お役に立てれば

11
PeterFromCologne