Question

这是我的用例：

我有一个包含4种不同实现的接口WorkflowA，WorkflowB，WorkflowC和WorkflowD。

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

我有一个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}`);
    }
  }

}

我还有一个加载的组件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调用，我认为这不是最好的事情。

关于如何利用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返回正确的但我认为使用注射器这个用例更适合。

确保您提供workflowA，workflowB，workflowC。

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

1 个答案: