Question

我正在Angular（v6）中使用ngx-translate和延迟加载方法。我遇到<dependency> <groupId>javax.annotation</groupId> <artifactId>javax.annotation-api</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.4.0-b180725.0427</version> </dependency> <dependency> <groupId>org.glassfish.jaxb</groupId> <artifactId>jaxb-runtime</artifactId> <version>2.4.0-b180725.0644</version> </dependency>

的问题

使用翻译管道可以正常工作。（translate.instant('Title')）

使用{{'Title' | translate}}方法始终可以使用默认语言，但是我无法通过共享模块中的语言选择器（用于切换语言的选择组件）来更改语言。

我不想每次都使用translate.instant()，是否可以使用此方法？

Answer 1

使用translate.stream（'Title'）而不是translate.instant（'Title'）。它返回一个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

Answer 2

它始终使用默认语言。这是主要问题。解决方案是：

this.translateService.onLangChange.subscribe((event: TranslationChangeEvent) => {
      this.translateService.setDefaultLang(event.lang);
    });

ngx-translate即时翻译问题

2 个答案: