Question

我正在第一次尝试动态注入组件。到目前为止，到目前为止我已经相当成功了，但是我有一个来自Typescript的错误正在困扰着我（不喜欢代码中有错误）

以下是应用程序的链接：https://stackblitz.com/edit/angular-vrtr51?embed=1&file=src/app/app.component.ts

我的目标是提供一种能够为我提供所需组件的服务，以便从任何地方（对于基于窗口小部件的网站）进行注入。

但是我在控制台中看到以下错误消息：错误TS2339：类型“ {}”上不存在属性“数据”。

您可以在app.component.ts的第35行看到它

但是代码工作正常，但是我想了解为什么出现此错误消息。

谢谢！

Answer 1

const factory = this.resolver.resolveComponentFactory(this.compProvider.get('header'));

如果您查看factory的类型，则为ComponentFactory<{}>。这是因为您正在使用服务获取组件类型，该服务返回任何类型。

export class ComponentProviderService {
  public get(id): any {
    console.log(this.componentMap[id]);
    return this.componentMap[id];
  }
}

在第30行执行以下操作时，您正在使用factory的类型创建组件，该类型隐式为ComponentFactory<{}>，因为该服务返回了any。

const comRef = this.headerContainer.createComponent(factory);

因此，comRef的类型为ComponentRef<{}>，具有属性instance，但是instance的类型为{}，即部分会给您错误：Property 'data' does not exist on type '{}'.

如果将第29行替换为

const factory = this.resolver.resolveComponentFactory(HeaderComponent);

它现在可以按预期工作，没有错误，因为factory的类型现在是显式ComponentFactory<HeaderComponent>，这反过来意味着comRef的类型是ComponentRef<HeaderComponent>，这反过来意味着属性instance现在的类型为HeaderComponent。

Angular服务提供组件（TS错误）

1 个答案: