使用 Angular cli 的 Angular 6 的 i18n

Question

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

当您使用 AOT 编译器进行国际化时，您必须预先构建一个 为每种语言提供单独的应用程序包，并为 基于服务器端语言检测或 url参数。

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

问题是，

在生产场景中甚至可能吗？

Answer 1

我们在 prod 上有一个应用程序，有两种语言 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"
  },

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

   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>

您必须添加一些代码来管理语言切换组件中两个应用程序之间的导航。你得到当前的 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);
    }
}