Angulaire 2: Mise en œuvre du service basée sur les routes

Question

J'ai une application angulaire animals, qui affiche une image d'un animal en fonction de l'emplacement actuel de l'itinéraire. Par exemple, /dog affichera l'image du chien et /cat affichera l'image du chat sur la page. Pour ce faire, j'ai créé 3 modules de fonctions - AnimalBoxModule, CatModule et DogModule. AnimalBoxModule a un composant AnimalBoxComponent et un service AnimalService. AnimalBoxComponent utilise AnimalService.getPicture() pour obtenir l'image de l'animal. DogModule et CatModule a DogService et CatService qui peut être utilisé pour fournir une implémentation personnalisée de AnimalService pour afficher l'image de chat et de chien respectivement. Je donne <animal-box></animal-box> dans le AppComponent. Pour afficher la bonne image de l'animal, je dois fournir la mise en œuvre du service (CatService ou DogService) en fonction de l'emplacement actuel de l'itinéraire. Comment est-ce possible en Angulaire?

Merci à l'avance

Modifier

Je ne veux pas faire des changements dans AnimalBoxComponent qui utilise le service, parce que je présente comme un composant réutilisable. OMI, ce ne serait pas une bonne idée de le changer chaque fois que nous voulons étendre cette application pour avoir plus de services aux animaux.

Answer 1

Très bien, il semble que vous pouvez le faire en utilisant l'injecteur angulaire, il ya un poste here qui répond à votre question.

import { Injector } from '@angular/core' 
... 
constructor(private injector: Injector){ 

    if(true) { 
    this.oneService = <OneService>this.injector.get(OneService); 
    } else { 
    this.twoService = <TwoService>this.injector.get(TwoService); 
    } 
} 

Je lirais le poste car il a plus d'informations sur le pourquoi.