Comment injecter classe d'aide dynamique

Question

je un composant qui utilise l'une des deux classes d'aide, comme:

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

Je me rends compte que cela est difficile à tester l'unité, alors comment puis-je injecter ces? Idéalement, je n'ai besoin que de l'un d'entre eux, selon que isMobile est vrai ou faux.

Answer 1

Il est possible que vous puissiez pousser tout cela vers l'injecteur. En supposant que les deux aides ont une superclasse commune nommée Helper, utilisez l'option du fournisseur useFactory pour créer selon votre besoin:

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

Ensuite, l'usine ressemblerait à ceci:

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

Notez que cela devra être dans le tableau des fournisseurs du composant, car la référence de l'élément n'est pas disponible au niveau du module.