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

如何动态注入辅助类

1 个答案: