Angular Dependency Injection – Injizieren Sie einen Dienst in benutzerdefinierte Rxjs-Operatoren

Angular ist ein meinungsorientiertes Framework. Es ist wirklich spannend zu sehen, wie die Flexibilität der Entwickler immer weiter zunimmt und von Tag zu Tag stärker wird. Ich glaube, es ist eine glückliche Ära für die Angular-Liebhaber.

Abhängigkeitsinjektion und RxJS – meiner Meinung nach sind dies leistungsstarke Funktionen, die Angular einzigartig und flexibel gemacht haben. Benutzerdefinierte RxJS-Operatoren sind eine großartige Möglichkeit, komplexe Logik in wiederverwendbare Funktionen zusammenzufassen.

Kürzlich bin ich auf einen Anwendungsfall gestoßen, bei dem ich einen benutzerdefinierten RxJS-Operator erstellen muss, der Dienste verwendet, um einen komplexen Anwendungsfall zu erreichen.

Sie können die Inject-Methode verwenden, um auf die gewünschte Dienstinstanz zuzugreifen. Inject muss jedoch im Kontext der Abhängigkeitsinjektion verwendet werden. Um dies zu erreichen, kann der Rxjs-Operator als InjectionToken registriert werden, der die Funktion useFactory verwendet, um seinen Wert zu instanziieren. Da es sich bei useFactory um einen Injektionskontext handelt, können die Dienste problemlos mit der Injektionsmethode injiziert werden.

Sehen wir uns an, wie der folgende Dienst in einen benutzerdefinierten rxjs-Operator eingefügt werden kann.

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

Der unten stehende benutzerdefinierte RxJS-Operator multipliziert einfach den angegebenen Wert mit 2 mithilfe des Multiplier-Dienstes.

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)));
    },
  });

Jetzt kann der benutzerdefinierte Operator innerhalb der Komponenten mithilfe des @Inject-Dekorators verwendet werden.

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
  }

  .....
}

Es gibt mehrere andere Möglichkeiten, denselben Anwendungsfall zu erreichen, z. B. das Erstellen eines separaten Dienstes und einer Methode, die einen benutzerdefinierten Operator zurückgibt. Aber ich mag den InjectionToken-Ansatz aufgrund seiner Eigenständigkeit. Selbst mit der Einführung von Signalen wird RxJS in naher Zukunft nichts erreichen, daher lohnt es sich, damit zu experimentieren.

Das vollständige Arbeitsbeispiel können Sie hier sehen.

Viel Spaß beim Codieren…?

Das obige ist der detaillierte Inhalt vonAngular Dependency Injection – Injizieren Sie einen Dienst in benutzerdefinierte Rxjs-Operatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!