각도 종속성 주입 — 사용자 정의 Rxjs 연산자 내부에 서비스 주입

Angular는 독창적인 프레임워크입니다. 개발자의 유연성이 어떻게 다양해지고 날이 갈수록 더욱 강력해지는지 보는 것은 정말 신나는 일입니다. Angular를 사랑하는 분들에게는 행복한 시대가 아닐까 싶습니다.

종속성 주입과 RxJS — 제 생각에는 Angular를 독특하고 유연하게 만드는 강력한 기능입니다. RxJS 사용자 정의 연산자는 복잡한 논리를 재사용 가능한 함수로 구성하는 좋은 방법입니다.

최근에 복잡한 사용 사례를 달성하기 위해 서비스를 사용하는 사용자 지정 RxJS 연산자를 만들어야 하는 사용 사례를 발견했습니다.

inject 메소드를 사용하여 원하는 서비스 인스턴스에 액세스할 수 있지만, 주입은 종속성 주입 컨텍스트 내에서 사용해야 합니다. 이를 달성하기 위해 Rxjs 연산자는 useFactory 함수를 사용하여 해당 값을 인스턴스화하는 InjectionToken으로 등록할 수 있습니다. useFactory는 주입 컨텍스트이므로 주입 메소드를 사용하면 문제 없이 서비스를 주입할 수 있습니다.

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
  }

  .....
}

별도의 서비스를 생성하고 사용자 지정 연산자를 반환하는 메서드를 만드는 등 동일한 사용 사례를 달성하는 여러 다른 방법이 있습니다. 그러나 나는 자체 포함성 때문에 InjectionToken 접근 방식을 좋아합니다. RxJS는 시그널이 도입되더라도 가까운 미래에는 아무데도 가지 않을 것이므로 실험해볼 가치가 있습니다.

여기에서 전체 작업 예제를 볼 수 있습니다.

행복한 코딩...?

위 내용은 각도 종속성 주입 — 사용자 정의 Rxjs 연산자 내부에 서비스 주입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!