angular - 如何在 Typescript 中将组件类定义为接口(interface)字段？

Question

我有以下界面:

interface Drawer {
  title: string,
  content: Component
}

然后我实例化这个接口(interface):

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 并阅读了数十篇文章，但无法弄清楚如何在接口(interface)中传递组件。显然，我可以简单地将内容声明为“任何”，但我更想知道如何正确地做事。

提前致谢!

Answer 1

那么，您可以创建一个接口(interface)，然后将Drawer 接口(interface)中的content 的类型指定为该类型。像这样:

这是通用接口(interface):

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

然后在你的Drawer界面中:

interface Drawer {
  title: string,
  content: GenericComponent
}

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

因此，一旦您在 SidebarWorkspacesComponent 上实现了此 GenericComponent 接口(interface)，您就可以为它指定抽屉内容的类型。

---

这是一个 Sample StackBlitz供您引用。