Question

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

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

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

问题是

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

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"
  },

之后，您必须添加Web服务器配置来为这两个应用提供服务，每个应用都位于子目录中：

   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个应用之间的导航。您将获得当前网址，然后重定向

  <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 cli的Angular 6的i18n

1 个答案: