Angular 依存関係の注入 — カスタム Rxjs オペレーター内にサービスを注入する

Angular は独自のフレームワークです。それが開発者の柔軟性にどのように広がり、日々強化されているかを見るのは本当に興奮しています。 Angular 愛好家にとっては幸せな時代になったと思います。

依存性注入と RxJS — 私の意見では、これらは Angular をユニークかつ柔軟にした強力な機能です。 RxJS カスタム演算子は、複雑なロジックを再利用可能な関数に組み立てる優れた方法です。

最近、サービスを使用して複雑なユースケースを実現するカスタム RxJS オペレーターを作成する必要があるユースケースに遭遇しました。

inject メソッドを使用して目的のサービス インスタンスにアクセスできますが、inject は依存関係注入コンテキスト内で使用する必要があります。これを実現するには、Rxjs オペレーターを、useFactory 関数を使用して値をインスタンス化する InjectionToken として登録できます。 useFactory はインジェクションコンテキストであるため、inject メソッドを使用して問題なくサービスをインジェクトでき​​ます。

以下のサービスを rxjs カスタム オペレーターにどのように挿入できるかを見てみましょう。

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

以下のカスタム RxJS 演算子は、Multiplier サービスを使用して、指定された値に 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 中国語 Web サイトの他の関連記事を参照してください。