Angular 爱奥尼亚4：通过按钮前后更改应用程序的语言

我需要创建一个按钮，将改变我的离子/角度应用程序的语言。我现在有两个按钮，一个将应用程序翻译成英语，另一个将应用程序翻译成法语。我希望它看起来好像只有一个按钮，可以来回翻译法语和英语，但我不知道如何做到这一点

以下是我到目前为止的情况：

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() {}
}

html：
{{'EN-BTN'|
翻译}
{{'FR-BTN'|
翻译}
ts:
从“@angular/core”导入{Component，OnInit}；
从'@ngx translate/core'导入{TranslateService}；
@组成部分({
选择器：“应用程序语言btn”，
templateUrl:'./language btn.component.html'，
样式URL:['./语言btn.component.scss']，
})
导出类语言BtnComponent实现OnInit{
构造函数（私有翻译：翻译服务）{
translate.setDefaultLang（'en'）；}
useLanguage（语言：字符串）{
这个。翻译。使用（语言）；
}
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>

{{'EN-BTN'| translate}}
{{'FR-BTN'|翻译}