Angular 6 的 i18n 使用 angular cli

Question

我一直在阅读 Angular 使用 ng 工具 xi18n 的 i18n 文档。它看起来像一个令人印象深刻的工具，但我没有得到以下行。

When you internationalize with the AOT compiler, you must pre-build a separate application package for each language and serve the appropriate package based on either server-side language detection or url parameters.

这是否意味着我需要构建 100 个应用程序并根据我在服务器端所做的检测来提供服务？

问题是，

Is it even possible in production scenarios?

Answer 1

我们在产品上有一个 2 种语言 fr 和 en 的应用程序，你必须为每种语言和不同的基础构建你的应用程序 url，在我的例子中我已经添加了我的 package.json

 "scripts": {
     ...
     "build-i18n:fr": "ng build --output-path=dist/fr --aot -prod --bh /fr/ --i18n-file=src/locale/messages.fr.xlf --i18n-format=xlf --locale=fr",
     "build-i18n:en": "ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/locale/messages.en.xlf --i18n-format=xlf --locale=en",
     "build-i18n:default": "ng build --output-path=dist/en --aot -prod --bh /en/",
     "build-i18n": "npm run build-i18n:default && npm run build-i18n:fr"
  },

之后你必须添加你的网络服务器配置来为这两个应用程序提供服务，每个应用程序都在子目录中：

   https://www.yourapp.com/en/
   https://www.yourapp.com/fr/

这里有一个 IIS 的例子

 <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
   <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="{R:1}/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

您必须添加一些代码来管理语言切换组件中 2 个应用程序之间的导航。你得到当前的url然后重定向

  <ul class="dropdown-menu" *ngIf="!isDev">
      <li  *ngFor="let language of languages;let i=index" >
           <a id="TopNavLinkLanguageName{{ i}}"  href="/{{language.lang}}/#{{getCurrentRoute()}}"  (click)="changeLanguage(language.lang)">
                        <img [src]="..." alt="flg" />
            </a>
       </li>
   </ul>

你的 ts 文件

getCurrentRoute() {
    return this.router.url;
}
changeLanguage(lang: string) {
    const langs = ['en', 'fr'];
    this.languages = this.allLanguages.filter((language) => {
        return language.lang !== lang;
    });
    this.curentLanguage = this.allLanguages[langs.indexOf(lang)].name
    localStorage.setItem('Language', lang);
    if (isDevMode()) {
        location.reload(true);
    }
}

Angular 6 的 i18n 使用 angular cli

i18n for Angular 6 using angular cli

angular-cli

angular

angular6

angular-cli-v6