使用带有 resolveComponentFactory 的通用组件会导致 Component<{}> 而不是 <T>

Question

我已经构建了一个对话框服务，它动态创建一个带有子组件的 DialogComponent。

我希望我的 DialogComponent 成为 <T> 的通用 class，因为我希望为我正在使用的任何子组件键入内容。我目前正在使用这些行创建我的 DialogComponent ->

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
const componentRef = componentFactory.create(new DialogInjector(this.injector, map));

问题是 resolveComponentFactory 实际上返回的是 DialogComponent<{}> 而不是 T。我确实尝试过投射，但似乎我做不到，因为缺少某些方法。

我想知道我是怎么做到的！

谢谢。

编辑

this.componentFactoryResolver.resolveComponentFactory<DialogComponent<T>> 成功了..

Answer 1

如果您对自己有把握，只需使用函数绕过类型检查即可。

myFunction<T>(className: T): { componentFactory: T, componentRef: any } {
  const componentFactory: T = this
    .componentFactoryResolver
    .resolveComponentFactory(className) as any;
  const componentRef = componentFactory
    .create(new DialogInjector(this.injector, map));
  return { componentFactory, componentRef };
}

const { componentFactory, componentRef } = myFunction(DialogComponent);

这可能是框架类型定义中的一个问题。此代码是一种解决方法，如果您没有找到其他任何东西，请使用它。

Answer 2

要获得正确的类型，您需要在 resolveComponentFactory 的泛型类型中传递所需的类型：

this.componentFactoryResolver.resolveComponentFactory<DialogComponent<T>>(DialogComponent);

使用带有 resolveComponentFactory 的通用组件会导致 Component<{}> 而不是 <T>

Using a generic Component with resolveComponentFactory result in Component<{}> instead of <T>

angular

angular-components

angular-dynamic-components