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>

我尝试使用最新版本5.0.0，但我收到此错误：

未捕获的TypeError：ctorParameters.map不是函数在ReflectionCapabilities.parameters（http://localhost:4200/main.bundle.js:40295:47）

我正在使用angular-cli，角度为2.0.0和npm 所以我切换到4.2.0，这似乎与我的配置工作正常。

翻译了app.component.html中的文字。但来自fivhello组件的那个没有本地化。它只显示HOME.TITLE。在调试时我发现TranslateService的get函数稍后会在渲染后调用，但我希望文本能够更新。

更改要使用的语言后，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版本的错误而管理。所以我可以使用它。

针对ohter 2问题的修复与角度工作和单件服务有关。

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

Answer 2

您应该添加子模块： TranslateModule。的 forChild （{....}）

Angular ng2-translate不适用于根组件的子组件

2 个答案: