0

我决定使用 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 但出现此错误:

未捕获的 TypeError: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);     
       }
    
      }
    

    有没有人遇到过同样的问题?

谢谢。

4

2 回答 2

0

您应该添加子模块:TranslateModule。forChild ({....})

于 2017-10-02T08:55:01.110 回答
0

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

ohter 2 问题的修复与 Angular 的工作方式和单例服务有关。

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

于 2017-01-11T14:28:33.093 回答