2017-07-18 6 views
2

すべてのページの翻訳タイトルを表示する必要があります。翻訳された動的ページタイトルをルータイベントのAngular 2で表示

私は、コードの上に実装され、以下のようにsubscribe()に翻訳を追加しました:

import 'rxjs/add/operator/filter'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 

import { TranslateService } from '@ngx-translate/core'; 
import { Component, OnInit } from '@angular/core'; 
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; 
import { Title } from '@angular/platform-browser'; 

@Component({...}) 
export class AppComponent implements OnInit { 
    constructor(
    private translate: TranslateService, 
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private titleService: Title 
) {} 
ngOnInit() { 
    this.router.events 
     .filter((event) => event instanceof NavigationEnd) 
     .map(() => this.activatedRoute) 
     .map((route) => { 
     while (route.firstChild) route = route.firstChild; 
     return route; 
     }) 
    .filter((route) => route.outlet === 'primary') 
    .mergeMap((route) => route.data) 
    .subscribe((event) => this.titleService.setTitle(this.translate.instant(event['title'])); 
    } 
} 

と私はタイトルとして、翻訳のための鍵を渡していますモジュールのルーティングに:それはで正常に動作している

const routes: Routes = [ 
    { path: 'buildings', component : BuildingsComponent, data : {title : 'BUILDINGS' }} 
]; 

を通常の場合。しかし、ページの更新では、タイトルを翻訳していません。サブスクライバでevent['title']が更新されています。

解決方法がわかりません。 助けてください。

感謝:)公式ドキュメントからTranslateServiceinstant方法の

答えて

0

それの原因:

インスタント(キー:文字列|アレイ、interpolateParams?:Object)を: 文字列は|オブジェクト:インスタントを取得します。キーの変換された値(またはキーの配列 )です。 /!\このメソッドは同期的で、デフォルトのファイルローダー は非同期です。 翻訳がいつロードされたかを知っており、この方法を使用することは安全です。 が不明な場合は、代わりにgetメソッドを使用する必要があります。

関連する問題