如何动态注入助手类

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

请注意，这必须在 组件的 providers 数组中，因为元素引用在模块级别不可用。