Wie man manuell einen Dienst zur Laufzeit auf eine Komponente in Typoskript Angular 2

Question

Hier ist mein Anwendungsfall erstellen und Draht:

Ich habe eine Schnittstelle mit 4 verschiedenen Implementierungen WorkflowA, WorkflowB, WorkflowC und WorkflowD.

export interface IWorkflow { 
    getQuestions(); 
    validateQuestions(); 
    getWorkflowSteps(); 
} 

Ich habe eine WorkflowManager Klasse, die den entsprechenden Workflow auf einer Eingangsgröße

export class WorkflowManager { 

    workflow:IWorkflow; 

    getWorkflow(workflow){ 
    switch (workflow) { 
     case 'workflowA': 
     return new workflowA(); 
     case 'workflowB': 
     return new workflowB(); 
     case 'workflowC': 
     return new workflowC(); 
     case 'workflowD': 
     return new workflowD(); 
     default: 
     throw new Error(`Unrecognized workflow: ${workflow}`); 
    } 
    } 

} 

ich auch eine Komponente haben WorkflowComponent Basis zurückgibt, die

Beispiel geladen wird (Werksmuster?): /workflow=WorkflowA lädt WorkflowComponent. Die Komponente extrahiert dann das routeparam workflow und übergibt es dann basierend auf dem Wert an die WorkflowManager, die den entsprechenden Workflow zurückgibt.

Hier ist ein Ausschnitt aus meiner Komponente

@Component({ 
... 
}) 

export class Workflow implements OnInit { 

    workflowInstance: IWorkflow; 

    constructor(
    private route: ActivatedRoute, 
    private workflowManager: WorkflowManager, 
) { 

    } 

    ngOnInit() { 
    this.route.params.subscribe(params => { 
     let regType: string = params['workflow']; 
     this.workflowInstance = this.workflowManager.getWorkflow(workflow); 
    }); 
    } 

} 

Aber ich weiß nicht, wie die Idee der Workflow* Klassen manuell instanziieren. Wie kann ich dies verbessern, damit ich es mit der von Angular2 gelieferten API verdrahte, so dass es in andere Komponenten verwaltet/injiziert werden kann?

Auch in meiner aktuellen Implementierung werde ich Ajax-Aufrufe außerhalb von Angular Framework machen müssen, was meiner Meinung nach nicht das Beste ist.

Haben Sie Ideen, wie Sie das Angular-Framework nutzen und dieses verbessern können?

Answer 1

Eine Möglichkeit ist, einen Injektor und erwerben die Workflow-Instanz zwingend zu injizieren mag:

@Injectable() 
export class WorkflowManager { 
    constructor(private injector:Injector) {}  

    workflow:IWorkflow; 

    getWorkflow(workflow){ 
    switch (workflow) { 
     case 'workflowA': 
     return this.injector.get(workflowA); 
     case 'workflowB': 
     return this.injector.get(workflowB); 
     case 'workflowC': 
     return this.injector.get(workflowC); 
     case 'workflowD': 
     return this.injector.get(workflowD); 
     default: 
     throw new Error(`Unrecognized workflow: ${workflow}`); 
    } 
    } 
} 

Alternativ können Sie injizieren workflowA, workflowB, workflowC, workflowA und zurück genau das Richtige auf der workflow abhängig, aber ich denke, Die Verwendung des Injektors ist für diesen Anwendungsfall besser geeignet.

Stellen Sie sicher, dass Sie workflowA, workflowB, workflowC angeben.