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

Posted 2023-02-23

【中文标题】如何在运行时手动创建服务并将其连接到 typescript Angular 2 中的组件

【英文标题】：How to manually create and wire a service at runtime to a component in typescript Angular 2

【发布时间】：2016-10-25 02:48:13

【问题描述】：

这是我的用例：

我有一个具有 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。然后该组件提取路由参数workflow，并根据该值将其传递给WorkflowManager，后者返回相应的工作流。

这是我的组件的 sn-p

@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 框架并改进它的任何想法？

【参考方案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。

【讨论】：

谢谢。无论如何，通过不实例化所有内容来进一步改进这一点，而只是每次都需要的那个？

不确定你的意思。上面的代码仅实例化 workflow 参数明确请求的内容。如果您将在每个 using DI 上注入一个实例，并带有构造函数参数，那么它将一次全部实例化。

作为回报 this.injector.get(workflowA)，'workflowA'（注意单词开头的小写字母'w'）是这个类中已经声明的实例吗？角度如何在返回 this.injector.get(workflowA) 语句中从“workflowA”中选择 WorkflowA 类？谢谢。

再次不确定您的意思。您在问题的代码中使用new workflowA();，因此我假设类名是workflowA，小写w。

这样，一个特定的工作流只有一个实例，即使它被多次请求。每个工作流都是在第一次请求时创建的。如果根本没有请求，则不会创建实例。