Предварительная загрузка перевода .json - PullRequest
Новая
       32

Предварительная загрузка перевода .json

0 голосов
/ 31 января 2019

Я пытаюсь предварительно загрузить свои переводы.Я решил использовать защиту, чтобы убедиться, что заголовок страницы будет установлен правильно, и он будет работать почти нормально.

Единственная проблема, с которой я сталкиваюсь, заключается в том, что иногда translate.use внутри цикла forEach занимает больше времени.чем тот, который выходит за его пределы, что приводит к неправильному языку страниц.

Как я могу реализовать логику, которая позволила бы мне запускать эти 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) )
      );
  }

}

1 Ответ

0 голосов
/ 31 января 2019

Я решил проблему, превращая мои наблюдаемые в обещания, но это выглядит странно.Есть ли красивее решение? 

    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();
      });
...