Question

我正在玩角度动态组件。但我遇到了一个我不知道如何解决的问题。

我有这个界面。

export interface InjectableComponent{
    setData(data: any): void;
}

类实现接口。

export class DemoComponent implements InjectableComponent {
    setData(data: any): void {

    }
}

使用interface作为参数类型的函数。

openComponent(component: InjectableComponent, data: any) {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(<any>component);
    this.placeholder.clear();

    let componentRef = this.placeholder.createComponent(componentFactory);
    (<InjectableComponent>componentRef.instance).setData(data);
}

调用功能。

openComponent(DemoComponent, null); <-- ERROR

出现此错误：

Argument of type 'typeof DemoComponent' is not assignable to parameter of type 'InjectableComponent'.
Property 'setData' is missing in type 'typeof DemoComponent'.

有人可以向我解释为什么这不起作用？可能有解决方法吗？

Answer 1

您可以使用特殊的通用类型Type<T>，例如

openComponent(component: Type<InjectableComponent>, data: any) {
   ...
}

<强> Plunker Example

Answer 2

似乎openComponent方法需要一个实例：

   const demoComponent = new DemoComponent()

   ...

   openComponent(demoComponent, null);

Angular 4：'typeof CLASS'类型的参数不能分配给'INTERFACE'类型的参数

2 个答案: