Question

我有以下界面：

interface Drawer {
  title: string,
  content: Component
}

然后我实例化此接口：

let workspace: Drawer = {
    title: 'Workspaces',
    content: SidebarWorkspacesComponent
};

在编译过程中出现以下错误：

ERROR in src/app/components/sidebar/sidebar-toggler.component.ts(36,4): error TS2559: Type 'typeof SidebarWorkspacesComponent' has no properties in common with type 'Component'.

现在，我尝试使用ComponentRef并阅读了数十篇文章，但不知道如何在接口中传递组件。显然，我可以简单地将内容声明为“任何”，但是我宁愿知道如何正确地做事。

谢谢！

Answer 1

最接近的是使您的界面通用并将其更改为：

interface Drawer<T = any> {
  title: string,
  content: Type<T>
}

使用Type<T> interface from @angular/core，因为组件实际上并不共享一个公共接口，除非您通过实现某种占位符接口来实施它。

dialog API from material是前一种方法的一个示例，因为它使用相似的接口以便将组件类型作为参数。

Answer 2

好吧，您可以创建一个interface，然后在content界面中将Drawer的类型指定为该类型。像这样：

这是通用接口：

export interface GenericComponent {
  /*Your Specification Here*/
}

然后在您的Drawer界面中：

interface Drawer {
  title: string,
  content: GenericComponent
}

现在，您可以将在其上实现了GenericComponent接口的任何组件分配给Drawer接口的content。

因此，一旦在SidebarWorkspacesComponent GenericComponent Drawer`的内容上实现了此, you can then specify the type of接口，就可以了。

这是您推荐的Sample StackBlitz。

如何在Typescript中将组件类定义为接口字段？

2 个答案: