Suntikan Ketergantungan Sudut — Suntikan perkhidmatan dalam pengendali Rxjs tersuai

Sudut ialah rangka kerja pendapat. Ia benar-benar teruja untuk melihat bagaimana ia mencapah ke arah fleksibiliti pembangun dan menjadi lebih kukuh dari hari ke hari. Saya percaya ia adalah era yang menggembirakan untuk pencinta Angular.

Suntikan kebergantungan dan RxJS — Pada pendapat saya, adalah ciri berkuasa yang menjadikan Angular unik dan fleksibel. Pengendali tersuai RxJS ialah cara terbaik untuk mengarang logik kompleks ke dalam fungsi boleh guna semula.

Baru-baru ini saya menjumpai usecase yang mana saya perlu mencipta operator RxJS tersuai yang menggunakan perkhidmatan untuk mencapai beberapa usecase yang kompleks.

Anda boleh menggunakan kaedah suntikan untuk mengakses contoh perkhidmatan yang diingini, suntikan mesti digunakan dalam konteks suntikan pergantungan. Untuk mencapai matlamat ini, pengendali Rxjs boleh didaftarkan sebagai InjectionToken yang menggunakan fungsi useFactory untuk menyatakan nilainya. Memandangkan useFactory ialah konteks suntikan, perkhidmatan boleh disuntik tanpa sebarang masalah menggunakan kaedah suntikan.

Mari lihat bagaimana perkhidmatan di bawah boleh disuntik dalam pengendali tersuai rxjs.

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

Pengendali RxJS tersuai di bawah hanya gandakan nilai yang diberikan dengan 2 menggunakan perkhidmatan Pengganda.

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

Kini pengendali tersuai boleh digunakan dalam komponen menggunakan penghias @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
  }

  .....
}

Terdapat beberapa cara lain untuk mencapai kes penggunaan yang sama seperti mencipta perkhidmatan berasingan dan kaedah yang akan mengembalikan pengendali tersuai. Tetapi saya suka pendekatan InjectionToken kerana kebolehtahanannya sendiri. RxJS tidak akan ke mana-mana dalam masa terdekat walaupun dengan pengenalan isyarat jadi ia patut dicuba.

Anda boleh melihat contoh penuh berfungsi di sini.

Selamat Pengekodan...?

Atas ialah kandungan terperinci Suntikan Ketergantungan Sudut — Suntikan perkhidmatan dalam pengendali Rxjs tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!