Injection de dépendance angulaire – Injecter le service dans les opérateurs Rxjs personnalisés

Angular est un framework avisé. C’est vraiment passionnant de voir à quel point il s’écarte vers la flexibilité des développeurs et devient plus fort de jour en jour. Je crois que c'est une époque heureuse pour les amoureux d'Angular.

L'injection de dépendances et RxJS — À mon avis, ce sont des fonctionnalités puissantes qui ont rendu Angular unique et flexible. Les opérateurs personnalisés RxJS sont un excellent moyen de composer une logique complexe en fonctions réutilisables.

Récemment, je suis tombé sur un cas d'utilisation dans lequel je dois créer un opérateur RxJS personnalisé qui utilise le service pour réaliser un cas d'utilisation complexe.

Vous pouvez utiliser la méthode inject pour accéder à l'instance de service souhaitée, mais inject doit cependant être utilisé dans le contexte d'injection de dépendances. Pour y parvenir, l'opérateur Rxjs peut être enregistré en tant que InjectionToken qui utilise la fonction useFactory pour instancier sa valeur. Puisque useFactory est un contexte d'injection, les services peuvent être injectés sans aucun problème en utilisant la méthode inject.

Voyons comment le service ci-dessous peut être injecté dans un opérateur personnalisé rxjs.

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

L'opérateur RxJS personnalisé ci-dessous multiplie simplement la valeur donnée par 2 à l'aide du service Multiplier.

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

L'opérateur personnalisé peut désormais être utilisé dans les composants à l'aide du décorateur @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
  }

  .....
}

Il existe plusieurs autres façons d'atteindre ce même cas d'utilisation, comme créer un service distinct et une méthode qui renverrait un opérateur personnalisé. Mais j'aime l'approche InjectionToken en raison de son caractère autonome. RxJS ne va nulle part dans un avenir proche, même avec l'introduction de signaux, cela vaut donc la peine d'expérimenter là-dessus.

Vous pouvez voir l'exemple de travail complet ici.

Joyeux codage…?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!