如何在 ionic 3 和 angular 5 中使用插件全球化

Question

我想获取我的设备语言并按设备语言翻译内容。

我引用https://ionicframework.com/docs/v3/native/globalization/ 并尝试使用它。

这是我的 app.module.ts

import { HttpClient,HttpClientModule} from '@angular/common/http';
import { TranslateLoader, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Globalization } from '@ionic-native/globalization'

export function createTranslateLoader(http:HttpClient){
  return new TranslateHttpLoader(http, './assets/i18n/','.json')
}
   . . .
  imports: [
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory:(createTranslateLoader),
          deps: [HttpClient]
      }
  })
  ],
  providers: [
    Globalization
  ]

这是我的 app.component.ts

import { Globalization } from '@ionic-native/globalization'
import { TranslateService } from '@ngx-translate/core';

constructor(public Translate:TranslateService,private global: Globalization) {
    platform.ready().then(() => {
    this.Translate.setDefaultLang('EN');
    this.global.getPreferredLanguage()
    .then(res => console.log(res))
    .catch(e => console.log(e));
    });
  }
}

这是我的家.html

 <ion-title> {{'HOME.TITLE'  | translate}} </ion-title>
 <h2>  {{'HOME.CONTENT' |  translate}}</h2>

这是我的 Package.json

{"@angular/core": "5.2.11"
 "@angular/http": "5.2.11"
"@ionic-native/globalization": "^4.20.0"
"@ngx-translate/core": "^9.1.1"
"@ngx-translate/http-loader": "^4.0.0"
"cordova-plugin-globalization": "^1.11.0"
"description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-globalization": {}
    }
  }

它只显示默认语言（EN），我希望它通过我选择的设备语言翻译其他语言。请告诉我如何解决它或提供一些示例。

Answer 1

您指的是 Ionic V4 文档，而不是指 Ionic V3 文档

V3 DOC

ionic cordova plugin add cordova-plugin-globalization
npm install --save @ionic-native/globalization@4

https://ionicframework.com/docs/v3/developer-resources/ng2-translate/

npm install @ngx-translate/core @ngx-translate/http-loader --save