Angular: предотвращение нескольких запросов от каналов, использующих один и тот же сервис

Question

Я пытаюсь создать модуль, который позволил бы Angular использовать Fluent для переводов.Я создал сервис и канал, которые позволяют использовать Fluent в любом проекте Angular.Как только выполняется первый канал, служба проверяет, кэширован ли уже файл перевода, и загружает его в противном случае.

https://gitlab.com/tobias47n9e/angular-fluent/blob/master/angular-fluent/src/lib/angular-fluent.service.ts#L66

private fetchTranslationsAndResolveKey(
    key: string,
    options: any,
    locale: string,
): Observable<string> {
    return this.http
        .get(`assets/i18n/${locale}.ftl`, { responseType: 'text' })
        .pipe(
            map((content: string) => {
                this.translationsMap[locale] = content;
                this.fetchingFile = false;
                return this.resolveKey(key, options, locale);
            }),
            concatAll(),
        );
}

Но похоже, что каждый канал получает своесобственная копия этой наблюдаемой цепочки или что-то не работает с ожиданием по первому запросу.Есть ли хороший способ избежать загрузки файла перевода несколько раз?

Pipe:

@Pipe({
name: 'fluent',
pure: false,
})
export class FluentPipe implements PipeTransform {
locale: BehaviorSubject<string>;

constructor(private fluentService: AngularFluentService) {}

transform(key: string, args?: any): Observable<string> {
    if (!this.locale) {
        this.locale = this.fluentService.locale;
        this.locale.subscribe(locale => {
            if (locale) {
                return this.fluentService.translate(
                    key,
                    args,
                    getLocale(args),
                );
            }
        });
    }

    return this.fluentService.translate(key, args, getLocale(args));
}
}

Текущее решение, которое сохраняет состояние в службе:

• https://gitlab.com/tobias47n9e/angular-fluent/blob/master/angular-fluent/src/lib/angular-fluent.service.ts#L30
• https://www.npmjs.com/package/angular-fluent

Answer 1

AngularFluentService поддерживает карту (translationsMap:12) переводов для данной локали, которую вы передаете AngularFluentService::translate.Если карта не содержит локали, она отправит запрос http, но все последующие вызовы translate с той же локалью получат перевод с карты вместо выполнения запроса.Поэтому все, что вам нужно сделать в трубе, это:

@Pipe({
  name: 'fluent'
})
export class FluentPipe implements PipeTransform {

  constructor(private fluentService: AngularFluentService) {
  }

  transform(key: string, args?: any): Observable<string> {
    return this.fluentService.translate(key, args, getLocale(args));
  }
}

Answer 2

Я не очень уверен, как работает этот плагин, но я думаю, что вам нужен оператор преобразования as

Вы можете использовать корневой узел в своем шаблоне, используя асинхронный канал, который может назначитьрезультат для переменной, которую можно использовать в шаблоне, когда он будет готов как

<ng-container *ngIf="data | custPipeReturningObservable$ | async as num">
    {{num}}
</ng-container>

Сведения о режиме в стеке https://stackblitz.com/edit/angular-async-with-custom-pipe, где я попытался связать пользовательский канал, возвращая наблюдаемое с асинхронностьютруба