Angular は獨(dú)自のフレームワークです。それが開(kāi)発者の柔軟性にどのように広がり、日々強(qiáng)化されているかを見(jiàn)るのは本當(dāng)に興奮しています。 Angular 愛(ài)好家にとっては幸せな時(shí)代になったと思います。

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

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

inject メソッドを使用して目的のサービス インスタンスにアクセスできますが、inject は依存関係注入コンテキスト內(nèi)で使用する必要があります。これを?qū)g現(xiàn)するには、Rxjs オペレーターを、useFactory 関數(shù)を使用して値をインスタンス化する InjectionToken として登録できます。 useFactory はインジェクションコンテキストであるため、inject メソッドを使用して問(wèn)題なくサービスをインジェクトでき??ます。

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

// 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 デコレーターを使用してコンポーネント內(nèi)でカスタム オペレーターを使用できるようになりました。

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
  }

  .....
}

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

完全な動(dòng)作例はここでご覧いただけます。

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

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