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中文网其他相关文章！