首页 > 解决方案 > 离子选择选项的离子改变语言

问题描述

我使用 ion-select-option 实现语言切换来传递值并更改语言文件这里是 html 代码

  <ion-item>
    <ion-label>Language </ion-label>
    <ion-select placeholder="Select One" [(ngModel)]="lang" (ionChange)="switchLanguage()" interface="action-sheet">
      <ion-select-option value="ar" selected="true">Arabic</ion-select-option>
      <ion-select-option value="en">English</ion-select-option>
    </ion-select>
  </ion-item>

和ts代码

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

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


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  lang: any;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    public translate: TranslateService
  ) {
    this.initializeApp();
    this.lang = 'ar';
    this.translate.setDefaultLang('ar');
    this.translate.use('ar');
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.splashScreen.hide();
    });
  }

  switchLanguage() {
    this.translate.use(this.lang);
    console.log(this.lang);
  }



}

控制台总是以“ar”返回,知道问题出在哪里吗?

标签: angularionic-framework

解决方案


 <ion-select placeholder="Select Language" 
    [(ngModel)]="loginCredentials.language"
    (ngModelChange)="changeLanguage(loginCredentials.language)">
    <ion-select-option value="0">Select Language</ion-select-option> 
    
    <ion-select-option value="ar">Arabic</ion-select-option>
    
                         <ion-select-option value="en">English</ion-select-option>
                     
    
     </ion-select>
    
    
    
    
    
    
    
    
    
    
    
    
    changeLanguage(language) {
    
        this.translate.setDefaultLang(language)
     
        }

推荐阅读