はどのように手動で2

Question

角度typescriptです内のコンポーネントに、実行時にサービスを作成し、配線するためにここに私のユースケースです：

私は4つの異なる実装WorkflowA、WorkflowB、WorkflowCとWorkflowDとのインタフェースを持っています。 （？Factoryパターン）

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

Iは入力変数に基づいて適切なワークフローを返すWorkflowManagerクラスを有する

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

} 

Iはまた

例ロードされるコンポーネントWorkflowComponent有する： を/workflow=WorkflowAロードWorkflowComponent。次に、コンポーネントはrouteparam workflowを抽出し、その値に基づいて適切なワークフローを返すWorkflowManagerに渡します。

は、ここに私のコンポーネント

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

} 

の抜粋だが、私は手動でWorkflow*のクラスをインスタンス化のアイデアを好きではありません。これを改善して、Angular2が提供するAPIを使用してワイヤリングすることで、他のコンポーネントに管理/注入することができます。

私の現在の実装では、Angularフレームワークの外でajax呼び出しを行う必要があります。私はこれを行うのが最善ではないと思います。

角度フレームワークを利用してこれを改善する方法に関するアイデアはありますか？

Answer 1

一つの方法は、注射器を注入し、命令的のようなワークフローインスタンスを取得することです。また、あなたがworkflowA、workflowB、workflowC、workflowAを注入することができ、ちょうどworkflowに応じて、正しいものを返す

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

が、私は思いますインジェクタを使用する方がこの使用例に適しています。

workflowA、workflowB、workflowCをご提供ください。