typescript - Angular 2 översättning byta språk i applikationen

Jag är ny på Angular 2 och håller på att bygga min första app. Jag har problem med att förstå hur man ändrar språket globalt, från ett enda ställe. Just nu kan jag ändra språket i en komponent. Jag använder en cookie för att lagra det valda språket och den är tillgänglig globalt via en tjänst. Såvitt jag förstår tror jag att jag måste använda en lyssnare för detta, men vet inte hur man gör det i praktiken eller om detta är rätt sätt. Ett exempel skulle uppskattas mycket.

Tack

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);

    }

}

och servicen

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);
    }

}

Svar #1

Det bästa sättet att ändra språk globalt är att använda pipes och skicka språkparametern som ett argument.

Detta skulle automatiskt ändra språket över de komponenter där språk-pipen används.

Följande exempel kan användas för att leverera flera språk samtidigt och kan användas för att ändra språket dynamiskt med ett enda klick

till exempel:

// **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';
        }
    }
}

Importera nu

Språk Pipe på App-modul-nivå för att det ska vara tillgängligt över hela appen eller importera det i den gemensamma modulen som du behöver

// **app.module.ts**
import { NgModule } from '@angular/core';
import { LanguagePipe } from '../pipes/language.pipe';
import { APP_INITIALIZER } from '@angular/core';
import { AppConfig } from '../config.service';

export function initializeApp(appConfig: AppConfig) {
  return () => appConfig.load();
}

@NgModule({
  imports: [],
  exports: [
    LanguagePipe,
  ],
  declarations: [
    LanguagePipe,
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfig], multi: true
    }
  ]
})
export class AppModule { }

Använd språktjänsten på komponentnivå där översättning krävs

// **header.component.ts**
import { Component, OnInit } from '@angular/core';
import { UserService } from '../login/user.service';
import { Router } from '@angular/router';
import { LanguageService } from '../services/language.service';

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

  toolName = 'test';
  currentUser: string;
  isLoginPage = true;
  constructor(
    public userService: UserService,
    private router: Router,
    public lang: LanguageService
  ) { }

  ngOnInit() {
  }
}

Använd Language Pipe i HTML som

//**header.component.html**
<strong>{{'hello' | language:lang.selectedLanguage}}{{'world' | language:lang.selectedLanguage}}</strong>