Как определить класс компонента как поле интерфейса в Typescript?

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> от @ angular / core , поскольку компоненты на самом деле не разделяютобщий интерфейс, если вы не реализуете его путем реализации своего рода интерфейса заполнителя.

Примером предыдущего подхода является API диалога из материала , так как он использует аналогичный интерфейс длятипы компонентов в качестве аргументов.

Answer 2

Ну, вы можете создать interface и затем указать тип content в интерфейсе Drawer в качестве этого типа.Примерно так:

Вот этот общий интерфейс:

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

Затем в вашем Drawer интерфейсе:

interface Drawer {
  title: string,
  content: GenericComponent
}

Теперь вы можете назначить любой компонент, который имеетреализовал интерфейс GenericComponent для него в интерфейсе Drawer content.

Так что, как только вы реализуете этот интерфейс GenericComponent в SidebarWorkspacesComponent , you can then specify the type of Содержимое Drawer`а.

---

Вот Образец StackBlitz для вашей ссылки.