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

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

最近我遇到了一個用例，我需要創(chuàng)建一個自定義 RxJS 運(yùn)算符，它使用服務(wù)來實(shí)現(xiàn)一些復(fù)雜的用例。

您可以使用注入方法來訪問所需的服務(wù)實(shí)例，但注入必須在依賴注入上下文中使用。為了實(shí)現(xiàn)這一點(diǎn)，Rxjs 運(yùn)算符可以注冊為 InjectionToken，它使用 useFactory 函數(shù)來實(shí)例化其值。由于useFactory是一個注入上下文，因此使用inject方法可以毫無問題地注入服務(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)相同的用例，例如創(chuàng)建單獨(dú)的服務(wù)和返回自定義運(yùn)算符的方法。但我喜歡 InjectionToken 方法，因?yàn)樗哂凶晕野菪?。即使引入了信號，RxJS 在不久的將來也不會取得任何進(jìn)展，因此值得嘗試一下。

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

編碼愉快……？

以上是Angular 依賴注入——在自定義 Rxjs 操作符中注入服務(wù)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！