国际化 - 角度

Posted 2021-04-17

我正在关注这个tutorial将我的网站内容翻译成几种语言，但我想这样做取决于访问我网站的默认语言，而不是按下按钮。

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

可能吗？基本上，像android Framework一样有效。

答案

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

export class App {

  constructor(private winRef: WindowRef) {

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

另一答案

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

var lang = navigator.language;

解决方案1

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

//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中，您将获得浏览器的语言，并且您可以调用switchLanguageto来定义您应该使用哪种语言。

解决方案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");
    }
}

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