Lingua di modifica della traduzione angular 2 nell’applicazione

Sono nuovo di angular 2 e sto costruendo la mia prima app. Ho problemi a capire come cambiare la lingua globalmente, da un singolo posto. In questo momento posso cambiare la lingua in un componente. Sto utilizzando un cookie per memorizzare la lingua selezionata ed è disponibile a livello globale tramite un servizio. Da quello che ho capito penso di dover usare un ascoltatore per questo ma non so come metterlo in pratica o se questo è il modo corretto. Un esempio sarà molto apprezzato.

Grazie

import {Component} from "@angular/core"; import {TranslateService} from "ng2-translate"; import {SettingsService} from "../settings.service"; @Component({ selector: 'rn-header', templateUrl: './header.html', styleUrls: ['./header.scss'] }) export class HeaderComponent { constructor(private translate: TranslateService, private settings: SettingsService) { translate.setDefaultLang(settings.getLanguage()); translate.use(settings.getLanguage()); } changeLanguage(language) { console.log('Language changed to: '+language); this.settings.setLanguage(language); this.translate.use(language); } } 

e il servizio

 import {Injectable} from "@angular/core"; import {CookieService} from "angular2-cookie/services/cookies.service"; @Injectable() export class SettingsService { defaultLanguage: string = 'en'; constructor(private _cookieService: CookieService) { } getLanguage() { if (this._cookieService.get('RN_LANGUAGE_PREFERENCE')) { return this._cookieService.get('RN_LANGUAGE_PREFERENCE'); } return this.defaultLanguage; } setLanguage(language: string) { this._cookieService.put("RN_LANGUAGE_PREFERENCE", language); } } 

     // Best way to change language Globally is to use pipes and send the language parameter as an argument. // This would automatically change the Language across the components where the language pipe is utilized. // The following example can be used to supple multiple language at a time and can be used to change Language dynamically on a single click // for example: **language.pipe.ts** `import { Pipe, PipeTransform, OnInit, OnChanges } from '@angular/core'; import { LanguageService } from '../services/language.service'; @Pipe({ name: 'language' }) export class LanguagePipe implements PipeTransform { constructor( public lang: LanguageService ) { } transform(value: string, args?: any): any { return this.lang.getLang(value); } } ` // **language.service.ts** `import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable() export class LanguageService { selectedLanguage = 'ch'; segmentsNames: any = {}; constantSegmentNames: any = {}; language = { undefined: { 'en': '', 'ch': '' }, null: { 'en': '', 'ch': '' }, '': { 'en': '', 'ch': '' }, 'hello': { 'en': 'Hello', 'ch': '你好' }, 'world': { 'en': 'World', 'ch': '世界' } }; constructor(private _http: HttpClient) { } getLang(value: string, args?: any): any { if (this.language[value]) { return this.language[value][this.selectedLanguage]; } return value; } /** * @function that is used to toggle the selected language among 'en' and 'ch' */ changeLanguage() { if (this.selectedLanguage === 'en') { this.selectedLanguage = 'ch'; } else { this.selectedLanguage = 'en'; } } } ` // **Use Language Pipe in HTML AS** `{{'hello' | language:lang.selectedLanguage}}{{'world' | language:lang.selectedLanguage}}` 

    PS: non dimenticare di importare la pipa e il servizio in tutti i componenti in cui desideri utilizzare questa funzionalità