如何在运行时手动创建服务并将其连接到打字稿中的组件 Angular 2

Question

这是我的用例：

我有一个具有 4 种不同实现的接口 WorkflowA、WorkflowB、WorkflowC 和 WorkflowD。

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

我有一个 WorkflowManager class returns 基于输入变量的适当工作流程（工厂模式？）

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

}

我还有一个组件 WorkflowComponent 已加载

示例： /workflow=WorkflowA 加载 WorkflowComponent。然后该组件提取路由参数 workflow 并根据该值将其传递给 WorkflowManager，returns 适当的工作流。

这是我的组件的一个片段

@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* classes 的想法。我该如何改进它，所以我使用 Angular2 提供的 API 连接它，以便它可以 managed/injected 到其他组件？

同样在我当前的实现中，我将不得不在 Angular 框架之外进行 ajax 调用，我认为这不是最好的做法。

关于如何利用 Angular 框架并改进它有什么想法吗？

Answer 1

一种方法是注入一个注入器并强制获取工作流实例，如：

@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、workflowA 并且根据 workflow 只注入 return 正确的那个但我认为使用注入器更适合这个用例。

确保提供 workflowA、workflowB、workflowC。

如何在运行时手动创建服务并将其连接到打字稿中的组件 Angular 2

How to manually create and wire a service at runtime to a component in typescript Angular 2

service

components

factory-pattern

typescript

angular