Question

我需要异步加载Angular应用的翻译。我正在尝试利用loadTranslations模块中的@angular/localize函数。问题是，仅当我将其放在底部的polyfills.ts文件中时，它才有效。我需要使用ajax请求加载此数据，因此我想延迟自举应用程序，直到那样。这是main.ts

中的代码

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

// delay from ajax call
setTimeout(() => {
  loadTranslations({
    'test': '123'
  });

  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}, 1000);

该应用程序启动时没有错误，但未应用翻译。如果我删除异步延迟，它也将不起作用：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

loadTranslations({
  'test': '123'
});

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

但是如果我将i18n代码移动到polyfills.ts（仅同步版本）上，它将起作用

import '@angular/localize/init';

import { loadTranslations } from '@angular/localize';

loadTranslations({
  'test': '123'
});

这是示例模板

<p i18n="@@test">Not working</p>

为什么它仅与polyfills.ts一起使用而不能与main.ts一起使用，并且有一种异步初始化它的方法？

Angular i18n-动态加载翻译

0 个答案: