ホームページ > ウェブフロントエンド > jsチュートリアル > Angular 依存関係の注入 — カスタム Rxjs オペレーター内にサービスを注入する

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

Barbara Streisand
リリース: 2024-12-07 18:57:13
オリジナル
370 人が閲覧しました

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
  }

  .....
}
ログイン後にコピー

Angular Dependency Injection — Inject service inside custom Rxjs operators

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

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

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

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

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート