国际化 - Angular

Question

我正在关注tutorial 将我的网站内容翻译成多种语言，但我想根据访问我网站的默认语言来完成，而不是按下按钮。

例如，如果一个西班牙人访问我的网站，我想用西班牙语显示，如果没有，用英文显示。

有可能吗？基本上，就像 Android 框架一样。

Answer 1

您可以从导航器对象中检测语言。导航器有语言数组。数组的第一种语言是浏览器的默认语言。

export class App {

  constructor(private winRef: WindowRef) {

    console.log('navigator object', winRef.nativeWindow.navigator);
  }
}

Answer 2

要访问浏览器的语言，只需使用：

var lang = navigator.language;

解决方案 1

因此，使用 in 的一个示例如下：

//Used for the internationalization
  constructor(
    private translate: TranslateService,
  ) {
    //Getting the language of the browser
    var lang = navigator.language;
    this.switchLanguage(lang);
  }

  switchLanguage(language: string) {
    //console.log(language);
    if (language == "en") this.translate.use("en");
    else if (language == "es") this.translate.use("es");
    else this.translate.use("en");
  }

在这种情况下，在组件的constructor 中，您可以获取浏览器的语言并调用switchLanguage 来定义您应该使用哪一种。

解决方案 2（对我来说效果更好）

另一种解决方案是创建一个新文件，例如translation.service.ts

用于管理该文件中的方法：

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class TranslationService {
    constructor(
        //Used for the internationalization
        private translate: TranslateService,
    ) { }

    switchLanguage(language: string) {
        console.log(language);
        if (language == "es" || language == "es-ar" || language == "es-bo" || language == "es-cl" || language == "es-co" || language == "es-cr" || language == "es-do" || language == "es-ec"
            || language == "es-sv" || language == "es-gt" || language == "es-hn" || language == "es-mx" || language == "es-ni" || language == "es-pa" || language == "es-py"
            || language == "es-pe" || language == "es-er" || language == "es-es" || language == "es-uy" || language == "es-ve") this.translate.use("es");
        else this.translate.use("es");
    }
}

然后将其注入到您要翻译的组件中