使用 Angular 和 Typescript 的策略模式

Question

我想在 Angular/Typescript 中实现策略模式并在组件中使用服务；服务将策略接口作为构造函数参数。此外，约束是服务依赖于角度级别的其他一些注入服务。

我正在研究文档，但找不到解决方法。我不想以过度设计的代码而告终，寻找简单的解决方案来实现策略模式。

请看下面的模拟代码：

export interface IStrategy {
    calculate(a,b): number;
}

export class MinusStrategy implements IStrategy {
    calculate(a,b): number {
        return a - b;
    }
}

export class PlusStrategy implements IStrategy {
    calculate(a,b): number {
        return a + b;
    }
}

@Injectable() 
export class CalculatorService {
    // I understand it is not possible to have DI of the Interface here for calcStrategy 
    constructor(private http: HttpClient; private calcStrategy: IStrategy);
    
    getByCalc() {
        this.http.get('someurl?calc=' + calcStrategy.calculate(1,1));
    }
}

@Component(// skipped config here...)
export class MyComponent implements OnInit {
    // How to inject appropriate concrete strategy (and either autowire or provide httpClient?)
    constructor(private service: new CalculatorService(httpClient, new MinusStrategy()));
    
    useInComponent() {
        this.service.getByCalc();
    }
}

Answer 1

一种方法是定义一个自定义注入令牌并在您的组件提供者声明中使用此令牌（有关更多信息，请参阅https://angular.io/guide/dependency-injection-in-action#supply-a-custom-provider-with-inject）：

export const CalculatorStrategy = new InjectionToken<string>('CalculatorStrategy');

@Component({
    providers: [
        // define the actual strategy-implementation here, setting it as `useClass`-provider
        {provide: CalculatorStrategy, useClass: PlusStrategy}
    ]
})
export class MyComponent implements OnInit {
    
    constructor(private service: CalculatorService) {
    }

    useInComponent() {
        this.service.getByCalc();
    }
}

@Injectable()
export class CalculatorService {

    constructor(private http: HttpClient, @Inject(CalculatorStrategy) private calcStrategy: IStrategy);

    getByCalc() {
        this.http.get('someurl?calc=' + this.calcStrategy.calculate(1, 1));
    }
}

Answer 2

“IStrategy”需要使用抽象类而不是接口。因为 Angular 不支持将接口作为注入令牌。 （https://angular.io/guide/dependency-injection-providers#non-class-dependencies）。 之后，您可以在模块的提供者中定义如下

{ provide: IStrategy, useClass: MinusStrategy }

之后，CalculatorService 将使用 MinusStrategy 将注入该服务的模块中的任何组件。

export abstract class IStrategy {
    abstract calculate(a,b): number;
}

export class PlusStrategy extends IStrategy {
    calculate(a,b): number {
        return a + b;
    }
}

export class MinusStrategy extends IStrategy {

    calculate(a,b): number {
        return a - b;
    }
}

@Injectable({
  providedIn: 'root',
})
export class CalculatorService {

  constructor(
    private http: HttpClient, 
    private calcStrategy: IStrategy) {};
    
    getByCalc() {
        console.log(`Result is: ${this.calcStrategy.calculate(1,1)}`);
    }
}

//The module need to add token to providers for Strategy classes.
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    { provide: IStrategy, useClass: MinusStrategy }
  ],
  bootstrap: [...]
})
export class AppModule { }

请注意，例如，我为抽象类保留“IStrategy”名称。它应该是“BaseStrategy”或其他内容。

================================================ ==============

[ 2020 年 7 月 12 日 17:00:00 GMT+7 ]

我创建了一个演示项目并按照这个问题更新了我的方法。你能打开它再看看我的方法吗？

Stackblitz 链接： https://stackblitz.com/github/sangnt-developer/demo-injection-in-component-level

Github 链接： https://github.com/sangnt-developer/demo-injection-in-component-level

Answer 3

我的两分钱- 在这种情况下，您不能依赖 DI 提供具体实例。 DI 无法知道每个上下文中需要哪种类型的实例。

我建议在这里使用工厂模式。比如——

@Injectable()
export class StrategyFactory {
  createStrategy<T extends IStrategy>(c: new () => T): T {
    return new c();
  }
} 

//then you can inject StrategyFactory in your service class, use it like -
factory.createStrategy(MinusStrategy).calculate(2, 1); 

Answer 4

我认为它可以通过在提供者部分添加服务和令牌来实现组件级别。

 @Component({
    ...
    ...
    proverders: [
    CalculatorService,
    {provide: IStrategy, useClass: 
    PlusStrategy
    ]
    })

然后在构造函数上注入服务