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

Posted 2023-03-13

【中文标题】作为组件的输入变量的类型应该是啥 - Angular

【英文标题】：What should be the Type of input variable which is a Component - Angular作为组件的输入变量的类型应该是什么 - Angular

【发布时间】：2021-09-12 13:10:52

【问题描述】：

我正在尝试创建一个可重用的模块。在该模块中，我想使用 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 但没有运气

【问题讨论】：

请问，有一个模块和组件弹出 mat 对话框比直接引用其他模块中的 mat 对话框有什么价值？这为您解决了什么问题？可以有一个弹出垫子对话框的单例服务来代替这个吗？

【参考方案1】：

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

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

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

export type StartComponentType = SomeModalComponent | SomeModalComponent2;

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

【讨论】：

不，这将限制特定类型的组件。我可以接受任何基本上是一个组件的论点。我还将我的应用程序创建为 lib ，因此这将创建一些循环依赖

【参考方案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;

【讨论】：

ComponentType 需要 <T> 类型。这里的泛型应该是什么？

如果您只想允许某些组件，您可以提供那些 ComponentType 现在您只能提供其中之一。如果你想允许所有人使用任何/未知

@NicolasGehlert 正如他在原始问题中提到的那样，他想摆脱any

any 和 ComponentType 之间存在根本区别。在第一种情况下，您可以提供偶数、字符串、布尔值等等。然而，后者迫使您提供一个组件实例。如果您不想进一步指定哪些是允许的（例如，因为您构建了一个库），那么任何方式都是可行的

现在，应该是您提供的答案的一部分