预加载翻译 .json

Question

我正在尝试 pre-load 我的翻译。我决定使用防护装置来确保页面标题设置正确并且几乎可以正常工作。

我面临的唯一问题是，有时，forEach 循环内的 translate.use 比循环外的 translate.use 花费的时间更长，这会导致页面语言错误。

我如何实现一个逻辑，让我可以运行这 3 个 translate.use 一个接一个地运行？

import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';

import { map, switchMap, catchError } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';

import { Title } from '@angular/platform-browser';

@Injectable()
export class TranslationGuard implements CanActivate {

  constructor(
    private http: HttpClient,
    private translate: TranslateService,
    private titleService: Title) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

    const languages = ['Italiano', 'English', 'Español']

    this.translate.addLangs(languages);

    this.translate.setDefaultLang('Italiano');

    const languageToUse = 'Italiano' // static value for the example

    languages.filter( i => i !== languageToUse).forEach(i => {
       this.translate.use(i);
    })

    this.translate.use(languageToUse);

    return this.http.get('/assets/i18n/' + languageToUse + '.json')
      .pipe(
        map( (translations) =>  {
          const pageRoute = route.routeConfig.path.toUpperCase();
          this.titleService.setTitle(translations[pageRoute].PAGETITLE);
        }),
        switchMap(  () => of(true) ),
        catchError(  () => of(false) )
      );
  }

}

Answer 1

我解决了在 promises 中转换我的 observables 的问题，但它看起来很奇怪。有没有更漂亮的解决方案？

    languages = languages.filter( i => i !== languageToUse);

    this.translate.use(languages.pop()).toPromise()
       .then( _ => {
        return this.translate.use(languages.pop()).toPromise();
      }).then( _ => {
        return this.translate.use(languageToUse).toPromise();
      });

预加载翻译 .json

Preloading translation .json

observable

ngx-translate

angular7