作为组件的输入变量的类型应该是什么 - Angular

Question

我正在尝试创建一个可重用的模块。在该模块中，我想使用 MatDialog 打开不同的组件。让我们调用组件StartActionComponent。通常，我可以使用：

export class StartActionComponent{

  async startbuttonClicked(e: SomeEvent){
    const dialogRef = this.dialog.open( SomeModalComponent , {data: e});
  }
}

这很好用，但我想动态注入一个组件，比如说SomeModalComponent2。我正在尝试实现以下目标：

仪表板模块

export const START_COMPONENT = new InjectionToken<any>('START_COM');

export class DashboardModule {

  static forRoot(conf: {
    onStart: any
  }):ModuleWithProviders<DashboardModule>{
    return {
      ngModule: DashboardModule,
      providers: [
        {
          provide: START_COMPONENT, useValue: conf.onStart
        }
      ]
    }
  }
}

在StartActionComponent 组件中。

StartActionComponent

  constructor(
    @Inject(STOP_COMPONENT) startComponent: any) {}

  async startbuttonClicked(e: SomeEvent){
    const dialogRef = this.dialog.open( this.startComponent , {data: e});
  }

还有app.module.ts

AppModule

import { SomeModalComponent2 } from 'some.modal2.component`;

@NgModule({
  import: [DashboardModule.forRoot(onStart: SomeModalComponent2)]
})

我想删除 any 并有一个类型：

static forRoot(conf: {onStart: any})

或

@Inject(STOP_COMPONENT) startComponent: any) {}

我尝试了 ComponentType 但没有运气

Answer 1

我想我遇到了一个类似的情况，而我想输入我的动态组件。所以我创建了一个名为 MyDynamicComponent.ts 的新文件，它看起来像这样：

export type MyDynamicComponent = GridComponent | GridControlComponent | FeatureComponent | FeatureControlComponent;

在你的情况下，我相信它会是这样的：

export type StartComponentType = SomeModalComponent | SomeModalComponent2;

希望我正确理解了您的问题，

Answer 2

到目前为止，我一直使用import { Type } from '@angular/core';

引用文档

@描述
表示 Component 或其他对象是其实例的类型
Type 的一个示例是 MyCustomComponent 类，在 JavaScript 中由 MyCustomComponent 构造函数表示。

export declare const 类型：FunctionConstructor;

至于通用<T> 参数，在您的情况下，您想使用any。然后它将强制您提供任何类型的组件，但仍然是一个组件 - 数字/布尔值/字符串/等。输入无效

替代方案：我认为 ComponentType 来自 import { ComponentType } from '@angular/cdk/portal/portal';。但是需要你安装 cdk 包并且界面看起来完全一样（如果你忽略了扩展）

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

// vs.

export declare interface Type<T> extends Function {
    new (...args: any[]): T;
}