时间戳

首页 > 解决方案 > Ionic 4：使用按钮来回更改应用程序的语言

angular - Ionic 4：使用按钮来回更改应用程序的语言

问题描述

我需要创建一个按钮来更改我的 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() {}
}

标签： angularionic4ngx-translate

解决方案

一个简单的解决方案是在单击按钮时切换一个布尔值，如果您希望英语成为默认值，我们可以使用例如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>

推荐阅读