angular - 离子选择选项的离子改变语言
问题描述
我使用 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”返回,知道问题出在哪里吗?
解决方案
<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)
}
推荐阅读
- ios - Swift 中带有多选复选框的可扩展下拉菜单
- cakephp - CakePHP - Router::url() 生成相对于当前页面的 url
- javascript - 单击时引导程序中的下拉菜单不显示任何内容
- python - 使用 Python pathlib 取消转义空格
- asp.net - Razor 页面 IFormFile .Net 5.0 附件标题验证
- python - AttributeError:“列表”对象没有带有 ItemAdapter 的属性“日期”
- python - 在 For 循环中替换数据框所有列中的“-”值
- mysql - MySQL UNION ALL ORDER BY 列不在 SELECT 中
- javascript - 我如何在 express 中收听实时更新?
- java - Class.getConstructor 的替代品[出于性能原因]