Angular ng2-translate 在根组件的子组件中不起作用

Question

我决定使用 ng2-translate 库进行应用程序国际化，因为它似乎比默认实现更好。但是我遇到了以下问题。

这是我的代码：

app.module.ts:

import { TranslateModule } from 'ng2-translate';
@NgModule({
imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot(),
    appRoutes
],

app.component.ts

   @Component({
 selector: 'fiv-app',
 templateUrl: './app.fivtemplate.html',
 providers: [TranslateService]
   })
  .....
 constructor(private _translateService: TranslateService) {
      this.langs= ['fi','en'];
     _translateService.addLangs(["en", "fi"]);
     _translateService.setDefaultLang('fi');
     let browserLang = _translateService.getBrowserLang();
      _translateService.use('fi');
   }
   .....

app.component.html

 <fiv-hello></fiv-hello>
<h2>{{ 'HOME.TITLE' | translate }}</h2>

和 fivhello.component.ts

<h2>{{ 'HOME.TITLE' | translate }}</h2>
<div [translate]="'HOME.TITLE'"> Test</div>

1. 我尝试使用最新版本 5.0.0 但出现此错误：

未捕获的类型错误：ctorParameters.map 不是函数 在 ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:40295:47)

我正在使用 angular-cli 、 angular 2.0.0 和 npm 所以我切换到了 4.2.0，它似乎在我的配置中运行良好。

1. app.component.html 中的文本已翻译。但是来自 fivhello 组件的那个没有本地化。它只显示 HOME.TITLE。 调试时，我注意到 TranslateService 的 get 函数在渲染后被调用，但我希望文本会更新。

2. 更改使用的语言后，dom 也没有更新。用于更改语言的组件如下：

   @Component({
       selector: 'language-option',
       templateUrl: './languageoption.component.html',
       styleUrls: ['./languageoption.component.css'],
       providers: [ TranslateService ]
     })
   export class LanguageoptionComponent implements OnInit {
     langs : String [];
   
    constructor(private _translateService: TranslateService) {
      this.langs = ['fi', 'en'];
    }
   
     ngOnInit() {
     }
   
     public changeLocale = (locale) => {
         this._translateService.use(locale);     
      }
   
     }
   

   有人遇到过同样的问题吗？

谢谢。

Answer 1

通过更新到最新版本的 angular 和 angular-cli，我设法摆脱了 5.0.0 版本的错误。所以我可以使用它。

其他 2 个问题的修复与 angular 的工作方式和单例服务有关。

我已将 TranslateService 添加到我配置它的根组件的提供者中。但我还添加了子组件和更改语言的外部组件。似乎他们创建了这个服务的不同实例，当然没有被配置。只需将其从其他组件的提供程序列表中删除即可解决这两个问题。

Answer 2

您应该在子模块中添加： TranslateModule.forChild({....})