我的函数仅返回一次可观察值

Question

我有以下服务：

// transloco-loader.ts

import { inject, Injectable } from '@angular/core';
import {TranslocoLoader } from '@ngneat/transloco';
import { map, take} from 'rxjs';
import { CFV2 } from '@go/shared-data-access-angular-config';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  private _configFacade = inject(CFV2.ConfigFacade);
  
  getTranslation(lang: string) {

    // We always get here
    console.log('function gets called each time');

    return this._configFacade.configState$.pipe(
      take(1),
      map((state) => {

        // But not here! Although configState$ didn't change!
        console.log('But we get here ONLY ONCE!');

        return { t: 'something' };
      }),
    );
  }
}

如果我调用

getTranslation

方法 2 次，只有第一次它进入管道！我在这里错过了什么吗？我正在使用 Angular 17。

我实际上可以通过使用异步语法来解决这个问题：

async getTranslation(lang: string): Promise<{ t: string }> {
    console.log('function gets called each time');

    const state = await firstValueFrom(
      this._configFacade.configState$.pipe(take(1)),
    );
    console.log('And we get here each time too!');

    return { t: 'something' };
  }

但我仍然想知道为什么 rxjs Observables 语法不起作用！

Answer 1

我想通了！就像ABC一样简单！当我实际使用 Transloco Service

load

方法（最终调用 Transloco 加载器服务上的

getTranslation

方法）时，我必须订阅它：

private readonly _langService = inject(TranslocoService);
this._langService
  .load('en')
  .pipe(take(1))
  .subscribe();

单独调用

load

方法，不会转到

map

运算符，因为我们不订阅它！但是异步函数正在工作，因为await首先获取结果，然后继续......