Question

我非常喜欢Angular 2+附带的i18n流程，尤其是以下两个功能：

能够使用CLI命令（ng xi18n）从带注释的HTML模板中生成翻译文件。
用翻译文本at build time替换模板文本的能力（节省运行时的资源）。

现在，我正在从事一个非Angular项目，并希望实现与上述类似的i18n流程。该项目基于AngularJS，并使用自定义Webpack捆绑。 HTML模板文件当前随Webpacks raw loader一起加载并捆绑为字符串。

Webpack本身建议串联其HTML and i18n loaders。尽管这可能会解决（2），但不能解决（1），并且模板中所需的语法与Angular中使用的语法相差很远（即，将i18n=""属性添加到必须

有人有处理此类问题的经验吗？对于这种用例，甚至在Angular 2+构建系统的一小部分，是否可以使用专用的Webpack加载器？

Answer 1

我有实现这样的用例的经验。您需要编写服务以读取包含xml转换的配置文件，然后在应用程序的引导阶段将其注入main.ts中，以便它可以读取xml转换

main.ts

        import { platformBrowserDynamic }  from '@angular/platform-browser-dynamic';
        import { getTranslationProviders } from './app/i18n-providers';

        import { AppModule } from './app/app.module';

        getTranslationProviders().then(providers => {
          const options = { providers };
          platformBrowserDynamic().bootstrapModule(AppModule, options);
        });

i18n-providers.ts

    import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

    export function getTranslationProviders(): Promise<Object[]> {

      // Get the locale id from the global
      const locale = document['locale'] as string;

      // return no providers if fail to get translation file for locale
      const noProviders: Object[] = [];

      // No locale or U.S. English: no translation providers
      if (!locale || locale === 'en-US') {
        return Promise.resolve(noProviders);
      }

      // Ex: 'locale/messages.es.xlf`
      const translationFile = `./locale/messages.${locale}.xlf`;

      return getTranslationsWithSystemJs(translationFile)
        .then( (translations: string ) => [
          { provide: TRANSLATIONS, useValue: translations },
          { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
          { provide: LOCALE_ID, useValue: locale }
        ])
        .catch(() => noProviders); // ignore if file not found
    }

    declare var System: any;

    function getTranslationsWithSystemJs(file: string) {
      return System.import(file + '!text'); // relies on text plugin
    }

然后在您的html中

    <h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>

像在Angular中一样将Webpack用于i18n

1 个答案: