无法翻译功能模块中组件中的文本

Question

我在共享模块中有一个组件，其中的文本必须使用 NGX-TRANSLATE 进行本地化。但我认为共享模块中的组件没有获取 app.module.ts 中加载的 JSON 文件，我收到以下错误。 "Cannot read property 'Desc' of undefined"。我还注意到翻译管道和 TranslateService 在 shared.component.ts 中工作。如果我缺少一些依赖项，请告诉我。

https://stackblitz.com/edit/angular-lmawme

app.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

app.component.ts

  constructor(private translate: TranslateService){
    translate.addLangs(['en','fr']);
    translate.setDefaultLang('fr');
    translate.use('fr');
    console.log(translate.getLangs());
  } 

shared.component.ts(template)
<div>Shared Component :  {{Shared.Desc|translate}}</div>

Answer 1

只需将您的模板更改为 <div>Shared Component : {{'Shared.Desc'|translate}}</div>。原因：您所有的字符串（此处为键）都必须用单引号或双引号引起来。

建议：尽量不要在AppModule中包含SharedModule。因为它消除了共享的想法。

无法翻译功能模块中组件中的文本

Not able to translate the text in components which are there in Feature modules

ngx-translate

angular