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

angular ionic4 ngx-translate
person Erin    schedule 07.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Одно простое решение - просто переключать логическое значение при нажатии кнопки, если вы хотите, чтобы английский был языком по умолчанию, мы можем использовать, например, 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>
person AJT82    schedule 07.03.2019