인젝터를 사용한 Angular의 전략 패턴

전략 패턴

Strategy is a behavioral design pattern that lets you define a family of algorithms, put each of them into a separate class, and make their objects interchangeable.

The Strategy pattern suggests that you take a class that does something specific in a lot of different ways and extract all of these algorithms into separate classes called strategies.

The original class, called context, must have a field for storing a reference to one of the strategies. The context delegates the work to a linked strategy object instead of executing it on its own.

주사기

Injectors are data structures that store instructions detailing where and how services form. They act as intermediaries within the Angular DI system.
Module, directive, and component classes contain metadata specific to injectors. A new injector instance accompanies every one of these classes.In this way, the application tree mirrors its hierarchy of injectors.

코드 분석
공항에 가야 한다고 상상해 보세요. 버스를 타거나 택시를 부르거나 자전거를 탈 수 있습니다. 이것이 귀하의 운송 전략입니다. 예산이나 시간 제약과 같은 요인에 따라 전략 중 하나를 선택할 수 있습니다.

먼저 "do_action"이라는 추상 메서드를 포함하는 전송을 위한 추상 클래스를 만듭니다.

export abstract class TransportStrategy {
  abstract do_action(cost: number): string;

  constructor() {}
}

그런 다음 전략 추상 클래스에서 확장되는 각 전략에 대한 클래스를 만듭니다. 여기에는 3가지 전략이 있습니다. 자동차, 자전거 및 버스.

import { Injectable } from '@angular/core';

@Injectable()
export class Car extends TransportStrategy {
  do_action(cost: number): string {
    return 'User take a car to go destination, it cost equal ' + cost;
  }
}

@Injectable()
export class Bus extends TransportStrategy {
  do_action(cost: number): string {
    return 'User take a bus to go destination, it cost equal ' + cost;
  }
}

@Injectable()
export class Bicycle extends TransportStrategy {
  do_action(cost: number): string {
    return 'User take a bicycle to go destination, it cost equal ' + cost;
  }
}

이제 전략 클래스를 제어하기 위해 한 장소에 모아야 합니다. 그래서 우리는 typescript Enum과 Map으로부터 도움을 받을 것입니다.
더 나은 이해를 위해:

지도

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

export enum VEHICLES {
  BUS = 'Bus',
  CAR = 'Car',
  BICYCLE = 'Bicycle',
}

export const TransportStaretgyController = new Map<VEHICLES, any>([
  [VEHICLES.BUS, Bus],
  [VEHICLES.CAR, Car],
  [VEHICLES.BICYCLE, Bicycle],
]);

전략 클래스와 해당 컨트롤러가 준비되었습니다. 이제 구성 요소에 주입해야 합니다. 먼저 구성 요소의 생성자에 인젝터를 주입합니다. 또한 TransportStrategy 클래스 유형의 파일이 필요합니다. 작동 방식을 찾으려면 아래 코드를 참조하십시오.

import { Component, Injector, OnInit } from '@angular/core';
import {
  TransportStaretgyController,
  TransportStrategy,
  VEHICLES,
} from '../@service/transport-strategy';

interface Transport {
  vehicle: VEHICLES;
  cost: number;
}

@Component({
  selector: 'app-transportation',
  templateUrl: './transportation.component.html',
  styleUrls: ['./transportation.component.css'],
})
export class TransportationComponent implements OnInit {
  private _transport: TransportStrategy;

  constructor(private injector: Injector) {}

  ngOnInit() {}

  in_choosing_a_strategy(clientStrategy: Transport): void {
    this._transport = this.injector.get<TransportStrategy>(
      TransportStaretgyController.get(clientStrategy.vehicle)
    );

    this._transport.do_action(clientStrategy.cost);
  }
}

이 경우 html 파일의 드롭다운을 사용하여 전략을 선택했습니다. 선택하면 전략 결과가 페이지에 나타납니다.
이 저장소에서 완전한 코드를 찾을 수 있습니다.
Repo

자원:
Angular
refactoring.guru