Блог

Мне нужно создать кнопку, которая изменит язык моего приложения 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>