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

时间:2017-01-11 12:45:26

标签: angular ng2-translate

我决定使用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,但我收到此错误:
  2.   

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

    我正在使用angular-cli,角度为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);     
         }
      
        }
      

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

    3. 感谢。

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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