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!