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中文網其他相關文章！
