Angular 2应用程序中更改语言的翻译

Question

我是 Angular 2 的新手，正在构建我的第一个应用程序。我不明白如何从单一的位置全局地更改语言。目前我可以在组件中更改语言。我正在使用 cookie 存储所选语言，并通过服务在全局范围内提供。从我所了解的来看，我认为必须使用监听器来实现这一点，但不知道如何实践或是否正确。非常感谢提供示例。

谢谢

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

    }

}

以及服务

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

}

- Razvan.432

Answer 1

全局更改语言的最佳方法是使用管道并将语言参数作为参数发送。

这将自动在使用语言管道的组件中更改语言。

以下示例可用于同时提供多种语言，并可用于单击即可动态更改语言。

例如：

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

现在导入

语言 管道在 应用程序模块 级别上，以便在整个应用程序中可用，或根据需要将其导入公共模块

// **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 { }

在需要翻译的地方，在组件级别使用语言服务

// **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() {
  }
}

使用HTML中的语言管道

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

- Ravi Teja

---

你能演示一下如何导入和使用管道和服务吗？ - EnigmaTech

管道和服务可以像任何其他管道或服务一样导入应用程序。例如：

1. 管道可以导入到应用程序模块中。
2. 服务可以导入到需要LanguageService的组件中。

我已经编辑了如何以及在哪里导入它们的答案。 - Ravi Teja