Angular 2+ dynamique traduit titre de la page en utilisant "TranslateService" & "Titre"

Question

J'essaie d'implémenter des possibilités multilingues dans mon application, et j'utilise ngx-translate. Maintenant, mon application a des possibilités de passer de la langue de l'anglais au russe, et ça fonctionne très bien, mais je veux que mon application aurait dynamique page title. J'utilise le service Title et ça fonctionne bien aussi, mais quand je change de langue, le title est toujours dans la langue par défaut.

COMMENT PUIS-JE AVOIR UN TITRE TRADUIT DYNAMIQUE DANS MON APP?

~ excuses pour une méthode erreurs grammaticales

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core'; 

    // i18n 
    import {HttpClientModule, HttpClient} from '@angular/common/http'; 
    import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; 
    import {TranslateHttpLoader} from '@ngx-translate/http-loader'; 
    import { AppRoutingModule } from './app-routing.module'; 
    import { AppComponent } from './app.component'; 

    // i18n function 
    export function HttpLoaderFactory(http: HttpClient) { 
     return new TranslateHttpLoader(http); 
    } 

    @NgModule({ 
     declarations: [ 
     AppComponent 
     ], 
     imports: [ 
     BrowserModule, 
     HttpClientModule, 
     TranslateModule.forRoot({ 
      loader: { 
      provide: TranslateLoader, 
      useFactory: HttpLoaderFactory, 
      deps: [HttpClient] 
      } 
     }), 
     AppRoutingModule 
     ], 
     providers: [], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

app.companent.ts

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

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 

    constructor (
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private titleService: Title, 
    private translateService: TranslateService 
) { } 

    ngOnInit() { 
    this.defaultLanguage(); 
    this.routerTitle(); 
    } 

    routerTitle() { 
    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.translateService.instant(event['title']))); 
    } 

    defaultLanguage() { 
    this.translateService.addLangs(['tj', 'ru', 'en']); 
    let lang = localStorage.getItem('language'); 
    if(lang !== null) { 
     this.translateService.use(lang); 
    } 
    else { 
     this.translateService.setDefaultLang('tj'); 
    } 
    } 

    switchLanguage(language: string) { 
    this.translateService.use(language); 
    localStorage.setItem('language', language); 
    } 

} 

Answer 1

instantanée de changement() pour diffuser () ici:

this.titleService.setTitle(this.translateService.stream(event['title'])));