如何动态注入 helper class

Question

我有一个组件使用两个助手 类 之一，例如：

import {HelperA} ...
import {HelperB} ...
...

@Component({..})
export class MyComponent implements OnInit {
    helper: Helper;     
    constructor(private ref: ElementRef, private device: MyDeviceDetectionService) {}

    ngOnInit() {
        if (this.device.isMobile) {
            this.helper = new HelperA(this.ref);
        } else {
            this.helper = new HelperB(this.ref);
        }
    }
}

我意识到这很难进行单元测试，那么我该如何注入这些呢？理想情况下，我只需要其中之一，具体取决于 isMobile 是真还是假。

Answer 1

您可以将所有这些都推出注射器。假设这两个助手有一个名为 Helper 的公共超类，请使用 useFactory 提供程序选项创建您需要的任何一个：

providers: [
  ...,
  { provide: Helper, useFactory: createHelper, deps: [MyDeviceDetectionService, ElementRef] },
]

然后工厂看起来像：

export function createHelper(device: MyDeviceDetectionService, ref: ElementRef): Helper {
  if (device.isMobile) {
    return new HelperA(ref);
  } else {
    return new HelperB(ref);
  }
}

请注意，这必须位于 组件的 提供程序数组中，因为元素引用在模块级别不可用。