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

Posted 2023-03-13

【中文标题】如何在 Typescript 中将组件类定义为接口字段？

【英文标题】：How to define a component class as an interface field in Typescript?

【发布时间】：2019-04-26 05:16:01

【问题描述】：

我有如下界面：

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

提前致谢！

【问题讨论】：

无需进一步依赖即可获得的最接近的东西。是content: Type<any> 使用Type from @angular/core，因为组件并不真正共享一个公共接口，除非你强制它。

@Jota.Toledo 你应该这样回答

@PierreDuc 完成，希望对您有所帮助

@SiddAjmera 基本上与我在回答中描述的占位符界面方法相匹配。它是一个解决方案，但 IMO 没有增加任何价值，因为它是一个空界面。

刚刚为此添加了评论。非常感谢您的意见。

【参考方案1】：

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

这是通用接口：

export interface GenericComponent 
  /*Your Specification Here*/

然后在你的Drawer界面中：

interface Drawer 
  title: string,
  content: GenericComponent

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

所以一旦你在 SidebarWorkspacesComponent, you can then specify the type ofDrawer 的内容上实现了这个GenericComponent 接口。

---

这里有一个Sample StackBlitz 供您参考。

【讨论】：

我觉得这是我想要完成的最佳方法。

@DannyCoulombe，太棒了。很高兴我能帮忙:)

【参考方案2】：

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

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

使用Type<T> interface from @angular/core，因为组件并不真正共享一个公共接口，除非你通过实现一种占位符接口来强制它。

前面的方法的一个例子是dialog API from material，因为它使用类似的接口来将组件类型作为参数。