Question

我希望有一项服务可以根据调用哪个组件来打开不同的对话框。

这是我提供的服务代码。 pictureOfCode

public addEditItem(origin: string, item?: MoneyModel|BudgetItemModel|WorkflowModel|SportItemModel) {
    const dialogRef = this.dialog.open(this.pickDialog(origin), {
      data: {
        item: item ? item : null,
        origin: origin,
      },
      width: '500px',
  });
    dialogRef.afterClosed().subscribe(result => {
        this.data.next(result);
        console.log('The dialog was closed', result ? result : 'by clicking on cancel');
    });
}

public pickDialog(origin: string) {
    switch (origin) {
      case 'workflow': return AddEditWorkflowItemComponent;
      case 'sport': return AddEditSportItemComponent;
    }
}

在本地运行时它可以工作，但是由于以下错误，构建失败：

类型'typeof AddEditWorkflowItemComponent |的参数不能将typeof AddEditSportItemComponent分配给类型'ComponentType | TemplateRef”。类型'typeof AddEditSportItemComponent'不可分配给类型'ComponentType | TemplateRef”。类型'typeof AddEditSportItemComponent'不可分配给'ComponentType'类型。在“ AddEditSportItemComponent”类型中缺少属性“作者”，但在“ AddEditWorkflowItemComponent”类型中为必需。

有没有办法将开关的返回值从typeof Component转换为ComponentType？或者，有没有一种方法可以更好地切换对话框打开的组件？任何帮助表示赞赏。

Answer 1

在图像中，authors中缺少道具AddEditSportItemComponent，因此，为了解决问题，可以使用pickDialog方法返回any：

  const dialogRef = this.dialog.open((this.pickDialog(origin) as any), {
      data: {
        item: item ? item : null,
        origin: origin,
      },
      width: '500px',
  });

或创建同时适合AddEditWorkflowItemComponent和AddEditSportItemComponent的接口，并处理返回它的方法。

export interface ComponentType<T = any> {
  new (...args: any[]): T;
}

public pickDialog(origin: string): ComponentType {
    switch (origin) {
      case 'workflow': return AddEditWorkflowItemComponent;
      case 'sport': return AddEditSportItemComponent;
    }
}

如果2个类是不同的，并且您想使用类型安全，则最终将为每个类型创建2个不同的方法。

类型'typeof Component'的参数不能分配给'ComponentType <Component>类型的参数

1 个答案: