angular - 如何动态注入助手类

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，使用useFactoryprovider 选项来创建你需要的任何一个：

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 数组中，因为元素引用在模块级别不可用。