我需要创建一个按钮来改变我的Ionic / Angular应用程序的语言。我目前有两个按钮,一个将应用程序翻译成英语,另一个将应用程序翻译成法语。我希望它看起来好像只有一个按钮可以在法语和英语之间来回翻译,但我不知道该怎么做。
这是我到目前为止:
html:
<ion-button color="primary" slot="end" (click)="useLanguage('en')">{{ 'EN-BTN' |
translate }}</ion-button>
<ion-button color="primary" slot="end" (click)="useLanguage('fr')">{{ 'FR-BTN' |
translate }}</ion-button>
ts:
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-language-btn',
templateUrl: './language-btn.component.html',
styleUrls: ['./language-btn.component.scss'],
})
export class LanguageBtnComponent implements OnInit {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en'); }
useLanguage(language: string) {
this.translate.use(language);
}
ngOnInit() {}
}
一个简单的解决方案是在单击按钮时切换布尔值,如果您希望英语成为我们可以使用的默认值,例如isEn = true
最初...
isEn = true;
useLanguage() {
this.isEn = !this.isEn;
isEn ? this.translate.use('en') : this.translate.use('fr');
}
至于按钮,你可以使用:
<ion-button color="primary" slot="end" (click)="useLanguage()">
<span *ngIf="isEn">{{ 'EN-BTN' | translate }}</span>
<span *ngIf="!isEn">{{ 'FR-BTN' | translate }}</span>
</ion-button>