ngx-translate проблема с мгновенным переводом

Я использую ngx-translate в Angular (v6) с ленивой загрузкой. У меня проблема с translate.instant('Title')

Используя канал перевода, он отлично работает. ({{'Title' | translate}})

При использовании метода translate.instant() язык по умолчанию всегда работает, но я не могу изменить язык с помощью селектора языка (выберите компонент, используемый для переключения языка), который находится в общем модуле.

Я не хочу использовать this.translate.onLangChange.subscribe каждый раз, есть ли альтернатива этому методу?


angular ngx-translate angular6
person Roshin Thomas    schedule 28.03.2019    source источник
comment
Я не хочу каждый раз использовать this.translate.onLangChange.subscribe. Любой другой подход?   -  person Roshin Thomas    schedule 28.03.2019

Ответы (2)


arrow_upward
7
arrow_downward

Используйте translate.stream ('Заголовок') вместо translate.instant ('Заголовок'). Он возвращает Observable.

См. Также https://github.com/ngx-translate/core.

Как это работает:

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
      <ng-container *ngIf="name$ | async as name">
        <p>Observable {{ name }}</p>
      </ng-container>
    </div>
  `,
})
export class AppComponent {
  public name$: Observable<string>;

  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }

  public ngOnInit(): void {
    this.name$ = this.translate.stream('HOME.TITLE');
  }
}

Вот ссылка на демонстрацию stackblitz: https://stackblitz.com/edit/github-az4kgy

person Pierre    schedule 28.03.2019
comment
можно ли использовать так же, как translate.instant ('key')? - person Roshin Thomas; 28.03.2019
comment
Я использую компонент общего селектора для переключения языка ›по умолчанию мгновенный перевод работает как« английский », но когда я переключаюсь на другой язык, перевод с помощью конвейера работает и мгновенно не работает. - person Roshin Thomas; 28.03.2019
comment
Причина в том, что Instant возвращает строку, а не Observable. - person Pierre; 28.03.2019
comment
Я добавил пример. - person Pierre; 29.03.2019
comment
спасибо, что приложили столько усилий. Но в моем случае выбор языка происходит из общего модуля. ао мгновенно и стрим, не слушая изменений. - person Roshin Thomas; 29.03.2019
comment
Странный. В наших реальных приложениях мы также используем SharedModules, и поток работает нормально. Может быть, у вас проблема с DI. - person Pierre; 29.03.2019
comment
это было отличное решение спасибо - person charlan alves; 31.05.2021

arrow_upward
1
arrow_downward

Всегда используется язык по умолчанию. Это основная проблема. Решение такое:

this.translateService.onLangChange.subscribe((event: TranslationChangeEvent) => {
      this.translateService.setDefaultLang(event.lang);
    });
person İzzettin Eroğlu    schedule 28.02.2020