從rxjs訂閱返回函數

Question

這是有關使用angular-l10n翻譯模塊的問題，但由於它是打字稿所特有的問題，因此我在此處發布。

為了動態配置模塊（例如設置默認語言），我必須使用以下方法：

load(): Function {
  this.localeConfig.language = 'en';
  return () => this.l10nLoader.load();
}

localeConfig和l10nLoader都被注入。

return () => this.l10nLoader.load(); 必須在最后執行才能在配置后實際顯示頁面。

我想做的是從api加載語言，然后設置配置。

我在返回Observable的服務中執行此操作，然后在load（）函數內部對其進行訂閱。

load(): Function {
  this.languageService.getDefaultLanguage().subscribe(
    lang => {
      this.localeConfig.language = lang;
      return ???
    }
  );
}

問題是：我不知道如何返回this.l10nLoader.load(); 在訂閱結束時。 如果我在函數末尾返回它，則在訂閱結束之前完成。

訂閱完成后，如何返回函數類型的內容？

Answer 1

您不能使用return來執行此操作，因為load()函數是異步的。 我建議做的是將load()返回值更改為Observable<Function>並在其中創建new Observable 。

這是代碼片段：

load(): Observable<Function> {
   return new Observable(observer => {
       this.languageService.getDefaultLanguage().subscribe(
          lang => {
             this.localeConfig.language = lang;
             observer.next(this.l10nLoader.load);
             observer.complete();
          }
       );
   });
}

之后，您可以通過以下方式調用此函數：

load().subscribe(fn => fn());

Answer 2

在Vanilla JS中，您可以使用回調。

例如，您可以這樣做：

load(cb: Function): Function {
  this.languageService.getDefaultLanguage().subscribe(lang => {
    this.localeConfig.language = lang;
    cb(lang);
  });
}

現在，您可以像這樣調用函數：

this.myL10nService.load(lang => {
  console.log('selected language is ' + lang);
});

Answer 3

我找到了可行的解決方案。
使用.toPromise()而不是.subscribe() ，然后返回l10nLoader.load(); 諾言的結果解決了我的問題。

語言configuration.service：

@Injectable()
export class LocalizationConfig {
  constructor(
      public l10nLoader: L10nLoader,
      @Inject(TRANSLATION_CONFIG) private translationConfig: TranslationConfig,
      @Inject(LOCALE_CONFIG) private localeConfig: LocaleConfig,
      private language: LanguageService
  ) { }

  load(): Promise<void> {
    return this.language.getUserLanguages().toPromise()
    .then(
      res => {
        this.localeConfig.language = res.language;
        return this.l10nLoader.load(); // this is important!!
      })
    .catch(  
      err => {
        // set default language or desired strategy
        return this.l10nLoader.load();   
      }
    );
  }
}

export function initLocalization(localizationConfig: LocalizationConfig): Function {
  return () => localizationConfig.load();
}

app.module：

providers: [
  ...
  {
    provide: APP_INITIALIZER,
    useFactory: initLocalization,
    deps: [LocalizationConfig],
    multi: true,
  },
  ...