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

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

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

inject メソッドを使用して目的のサービス インスタンスにアクセスできますが、inject は依存関係注入コンテキスト內で使用する必要があります。これを実現(xiàn)するには、Rxjs オペレーターを、useFactory 関數(shù)を使用して値をインスタンス化する 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
  }

  .....
}

これと同じユースケースを実現(xiàn)するには、別のサービスやカスタム演算子を返すメソッドを作成するなど、他にもいくつかの方法があります。しかし、私は、その自己包含性のおかげで、InjectionToken アプローチが好きです。 RxJS はシグナルの導入によっても近い將來に実現(xiàn)するものではないため、実験してみる価値はあります。

完全な動作例はここでご覧いただけます。

コーディングを楽しんでください…?

以上がAngular 依存関係の注入 — カスタム Rxjs オペレーター內にサービスを注入するの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。