inyectable - inyectar servicio en angular

Inyección de dependencia dinámica Angular 2 basada en @Input()

Question

Supongamos que tengo una directiva de componente Angular 2, donde quiero que la dependencia inyectada que el componente utiliza esté determinada por un @Input ().

Quiero escribir algo como <trendy-directive use="''serviceA''"> y hacer que esa instancia de TrendyDirective use serviceA, o que use serviceB si eso es lo que especifico. (Esta es una versión simplificada de lo que realmente estoy tratando de hacer)

(Para empezar, si cree que es una idea terrible, estoy abierto a esa información, pero explique por qué).

Aquí hay un ejemplo de cómo lograr lo que estoy pensando. En este ejemplo, imagine que ServiceA y ServiceB son inyectables que implementan iService al tener un ''superCoolFunction''.

@Component({
selector: ''trendy-directive'',
...
})
export class TrendyDirective implements OnInit {
constructor(
private serviceA: ServiceA,
private serviceB: ServiceB){}
private service: iService;
@Input() use: string;
ngOnInit() {
switch (this.use){
case: ''serviceA'': this.service = this.serviceA; break;
case: ''serviceB'': this.service = this.serviceB; break;
default: throw "There''s no such thing as a " + this.use + ''!'';
}
this.service.superCoolFunction();
}
}

Creo que esto funcionaría técnicamente, pero tiene que haber una mejor manera de realizar una inyección de dependencia dinámica.

Answer 1

En general, el mismo enfoque se describe en la documentación de Angular2: InjectorComponent

@Component({
providers: [Car, Engine, Tires, heroServiceProvider, Logger]
})
export class InjectorComponent {
car: Car = this.injector.get(Car);
heroService: HeroService = this.injector.get(HeroService);
hero: Hero = this.heroService.getHeroes()[0];
constructor(private injector: Injector) { }
}

Debe inyectar Injector en el constructor y listar todos los servicios en la propiedad de providers de la anotación @Component . Luego puede injector.get(type) , donde el type se resolverá desde su @Input . Según la documentación, el Service no se inyecta realmente hasta que lo solicite ( .get() ).

Answer 2

Es

// can be a service also for overriding and testing
export const trendyServiceMap = {
serviceA: ServiceA,
serviceB: ServiceB
}
constructor(private injector: Injector) {}
...
ngOnInit() {
if (trendyServiceMap.hasOwnProperty(this.use)) {
this.service = this.injector.get<any>(trendyServiceMap[this.use]);
} else {
throw new Error(`There''s no such thing as ''${this.use}''`);
}
}

Answer 3

Hay un servicio llamado Inyectar en el módulo @ angular / core. Con @Inject puedes conseguir una forma de inyección alternativa. Pero eso solo se puede hacer en constructor.

Por lo tanto, deberá colocar las entradas de componentes en la matriz de entradas de su decorador de componentes @ (no use el decorador de ingreso dentro de la clase) y luego inyectar esa variable de entrada en el constructor.