Angular 是一個(gè)自以為是的框架?？吹剿绾纬_發(fā)人員的靈活性發(fā)展並日益強(qiáng)大，真是令人興奮。我相信這對(duì) Angular 愛(ài)好者來(lái)說(shuō)是一個(gè)幸福的時(shí)代。

依賴注入和 RxJS — 在我看來(lái)，它們是強(qiáng)大的功能，使 Angular 變得獨(dú)特且靈活。 RxJS 自訂運(yùn)算子是將複雜邏輯組合成可重複使用函數(shù)的好方法。

最近我遇到了一個(gè)用例，我需要建立一個(gè)自訂 RxJS 運(yùn)算符，它使用服務(wù)來(lái)實(shí)作一些複雜的用例。

您可以使用注入方法來(lái)存取所需的服務(wù)實(shí)例，但注入必須在依賴注入上下文中使用。為了實(shí)現(xiàn)這一點(diǎn)，Rxjs 運(yùn)算子可以註冊(cè)為 InjectionToken，它使用 useFactory 函數(shù)來(lái)實(shí)例化其值。由於useFactory是注入上下文，因此使用inject方法可以毫無(wú)問(wèn)題地註入服務(wù)。

讓我們看看如何將以下服務(wù)注入到 rxjs 自訂運(yùn)算子中。

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

下面的自訂 RxJS 運(yùn)算子只需使用乘數(shù)服務(wù)將給定值乘以 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)));
    },
  });

現(xiàn)在可以使用 @Inject 裝飾器在元件中使用自訂運(yùn)算子。

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
  }

  .....
}

還有其他幾種方法可以實(shí)現(xiàn)相同的用例，例如建立單獨(dú)的服務(wù)和傳回自訂運(yùn)算符的方法。但我喜歡 InjectionToken 方法，因?yàn)樗哂凶晕野菪?。即使引入了信?hào)，RxJS 在不久的將來(lái)也不會(huì)取得任何進(jìn)展，因此值得嘗試一下。

您可以在此處查看完整的工作範(fàn)例。

編碼愉快…？

以上是Angular 依賴注入－在自訂 Rxjs 運(yùn)算子中註入服務(wù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！