Question

我正在尝试创建模态生成器服务。最终，我想用它来创作各种类型的模态。

我有一个创建模态组件的函数，我希望它接受各种类型的模态组件作为输入，并返回一个ComponentRef＆lt; （模态类型）＆gt;作为输出。问题是我在语法方面遇到了一些麻烦。

问题，特别是函数声明。这就是它现在的样子：

private createModalComponent (compType : Type<Component>, vCref: ViewContainerRef): ComponentRef<compType> { ... }

这给了我“无法找到名称'compType'”的错误，这是有道理的。所以我也尝试了一种更通用的方法：

private createModalComponent<T> (compType : T, vCref: ViewContainerRef): ComponentRef<T> { ... }

但是这给了我一个错误，即“类型'T'的参数不能分配给'Type＆lt; {}＆gt;'类型的参数。

所以我很难过。如何在typescript中返回动态类型对象？

import { Injectable, ViewChild, ViewContainerRef, ElementRef,
         EventEmitter, OnInit, ComponentRef, ComponentFactoryResolver,
         Type, ReflectiveInjector } from '@angular/core';
import { WizardModalComponent } from './wizard-modal/wizard-modal.component'


@Injectable()
export class ModalGeneratorService {

  constructor(private _cmpFctryRslvr: ComponentFactoryResolver, private _vcRef: ViewContainerRef) {}

  private createModalComponent (compType : Type<Component>, vCref: ViewContainerRef): ComponentRef<compType> {
    let factory = this._cmpFctryRslvr.resolveComponentFactory(compType);
    // vCref is needed cause of that injector..
    let injector = ReflectiveInjector.fromResolvedProviders([], vCref.parentInjector);
    // create component without adding it directly to the DOM
    let comp = factory.create(injector);
    return comp;
  }

  createWizardModalcomponent(vCref : ViewContainerRef) {
    createModalComponent(WizardModalComponent, vCref);
  }
}

Answer 1

这可能是答案，所以在此发布：

我从角度2框架本身查看了ComponentFactory文件;它使用“any”，但进一步说，这是它如何声明创建函数（注意“＆lt; C＆gt;”）：

create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any) : ComponentRef<C>

https://angular.io/docs/ts/latest/api/core/index/ComponentFactory-class.html

Answer 2

我不完全确定我完全理解这个问题，但这可能会有效：

private createModalComponent<T extends Type<{}>> (compType : T, vCref: ViewContainerRef): ComponentRef<T> { ... }

所以你要声明一个泛型类型但是将它限制为或扩展Type<{}>类型，这就是你所说的第二个错误。

Answer 3

感谢所有评论或回答的人，我找到了一个完全符合我想要的答案，这很简单。

我只是使用＆＃39; any＆＃39;键入代替组件引用的组件类型，如下所示：

private createModalComponent (compType : Type<Component>, vCref: ViewContainerRef): ComponentRef<any> { ... }

在这些时候，记住这一点总是有帮助的，虽然打字稿通常使用静态打字，但是给予我们任何＆＃39;任何＆＃39;关键词。希望其他人觉得这很有用。

如何在Typescript / Angular2中返回动态类型的对象？

3 个答案: