ルートコンポーネントの子コンポーネントで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を使用しようとしましたが、私はこのエラーを取得：

Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:40295:47)

私はそう角度-CLI、角度2.0.0およびNPM を使用しています4.2.0に切り替えました。私の設定でうまく動作しているようです。

2. app.component.htmlのテキストは翻訳されています。しかし、fivhelloコンポーネントからのものはローカライズされていません。 HOME.TITLEが表示されます。 デバッグ時に、TranslateServiceのget関数がレンダリング後に呼び出されることに気がつきましたが、テキストが更新されると予想していました。

3. 使用する言語を変更すると、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

最新の角度と角速度に更新することで、5.0.0バージョンのエラーを取り除くことができました。だから私はそれを使用することができます。

オッター2の問題の修正は、角度の動作とシングルトンサービスに関連する問題でした。

私が設定したルートコンポーネントのプロバイダにTranslateServiceを追加しました。しかし、子コンポーネントと言語を変更する外部コンポーネントも追加しました。そして、彼らはもちろん、構成されていない、このサービスの別のインスタンスを作成するようだ。両方の問題を解決するには、他のコンポーネントのプロバイダリストから単純に削除するだけで十分でした。

Answer 2

子モジュールには、 TranslateModuleを追加する必要があります。 forChild（{....}）