Angular 依賴注入－在自訂 Rxjs 運算子中註入服務

Angular 是一個自以為是的框架。看到它如何朝著開發人員的靈活性發展並日益強大，真是令人興奮。我相信這對 Angular 愛好者來說是一個幸福的時代。

依賴注入和 RxJS — 在我看來，它們是強大的功能，使 Angular 變得獨特且靈活。 RxJS 自訂運算子是將複雜邏輯組合成可重複使用函數的好方法。

最近我遇到了一個用例，我需要建立一個自訂 RxJS 運算符，它使用服務來實作一些複雜的用例。

您可以使用注入方法來存取所需的服務實例，但注入必須在依賴注入上下文中使用。為了實現這一點，Rxjs 運算子可以註冊為 InjectionToken，它使用 useFactory 函數來實例化其值。由於useFactory是注入上下文，因此使用inject方法可以毫無問題地註入服務。

讓我們看看如何將以下服務注入到 rxjs 自訂運算子中。

// Service
@Injectable({
  providedIn: 'root',
})
export class Multiplier {
  public transfrom(val: number) {
    return val * 2;
  }
}

下面的自訂 RxJS 運算子只需使用乘數服務將給定值乘以 2。

import { inject, InjectionToken } from '@angular/core';
import { Multiplier } from '../services/multiplier';
import { map, OperatorFunction, pipe } from 'rxjs';

export const MULTIPLIER_OPERATOR: InjectionToken<OperatorFunction<number, number>>
  = new InjectionToken('Multipler operator', {
    factory(): OperatorFunction<number, number> {
      const multipler = inject(Multiplier); // injected Multipler service
      return pipe(map((x: number) => multipler.transfrom(x)));
    },
  });

現在可以使用 @Inject 裝飾器在元件中使用自訂運算子。

import { Component, Inject } from '@angular/core';
import { BehaviorSubject, Observable, of, OperatorFunction } from 'rxjs';
import { MULTIPLIER_OPERATOR } from './rxjs-operators/custom';
import { CommonModule } from '@angular/common';

export class App {
  private _count = 1;
  public base = new BehaviorSubject(this._count);
  public val = new Observable();

  constructor(
    @Inject(MULTIPLIER_OPERATOR) // injected custom operator
    private multiplier: OperatorFunction<number, number>) {
      this.val = this.base.pipe(this.multiplier); // used rxjs operator
  }

  .....
}

還有其他幾種方法可以實現相同的用例，例如建立單獨的服務和傳回自訂運算符的方法。但我喜歡 InjectionToken 方法，因為它具有自我包容性。即使引入了信號，RxJS 在不久的將來也不會取得任何進展，因此值得嘗試一下。

您可以在此處查看完整的工作範例。

編碼愉快…？

以上是Angular 依賴注入－在自訂 Rxjs 運算子中註入服務的詳細內容。更多資訊請關注PHP中文網其他相關文章！