Ionic 4: меняйте язык приложения вперед и назад с помощью кнопки - PullRequest
Новая
       21

Ionic 4: меняйте язык приложения вперед и назад с помощью кнопки

2 голосов
/ 07 марта 2019

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

1 Ответ

1 голос
/ 07 марта 2019

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