无法解析 [组件] 的所有参数 [英] Can't resolve all parameters for [Component]

问题描述

在我的通用组件中，我有一个弯弯曲曲的说:'Angular: 无法解析 [path/base-collection.component.ts: ([object.Object], [object.Object], ?, [object.Object])] 中 BaseCollectionComponent 的所有参数/strong>'

In my generic component I have this squiggly saying: 'Angular: Can't resolve all parameters for BaseCollectionComponent' in [path/base-collection.component.ts: ([object.Object], [object.Object], ?, [object.Object])]'

组件代码如下:

import {BaseRepositoryService} from '../../services/base-repository.service';
import {Component, ComponentRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
import {BaseComponent} from '../base-component/base.component';
import {CreateCollectionItemModel} from '../../models/create-collection-item.model';
import {ComponentFactoryService} from '../../services/component-factory.service';
import {FrontendSelectorsIds} from '../../globals/frontend-selectors-ids';
import {BaseCollectionItemComponent} from '../base-collection-item/base-collection-item.component';

@Component({
  selector: FrontendSelectorsIds.BaseCollectionSelector,
  templateUrl: './base-collection.component.html',
  styleUrls: ['./base-collection.component.less']
})
export class BaseCollectionComponent<TypeModel> {

  @ViewChild('collectionItemsContainer', {read: ViewContainerRef}) collectionItemsContainer: ViewContainerRef;
  model: TypeModel[];
  components: ComponentRef<BaseComponent<TypeModel>>[];

  constructor(public repository: BaseRepositoryService<TypeModel>,
              public factoryService: ComponentFactoryService<TypeModel, BaseComponent<TypeModel>>,
              public componentType: Type<BaseCollectionItemComponent<TypeModel>>,
              public createCollectionItemModel?: CreateCollectionItemModel) {
    this.components = [];
  }

  loadModel(): void {
    this.repository.getAll()
      .then(results => {
        this.model = results;
        this.onLoadModelComplete();
      });
  }

  destroyChildren(): void {
    if (this.components) {
      for (const component of this.components) {
        component.destroy();
      }
    }
  }

  onLoadModelComplete() {
    this.createComponents(this.model);
  }

  mapResultsToCollection(): void {

  }

  createComponents(model: TypeModel[]): void {
    this.factoryService.setRootViewContainerRef(this.collectionItemsContainer);

    for (const item of model) {
      const newComponent = this.factoryService.addDynamicComponentWithModel(item, this.componentType);
      this.components.push(newComponent);
    }
  }
}

基本上这个组件是为集合注入子列表项组件.

Basically this component is made to inject the children list-items components for collections.

第一件事我并没有真正理解错误指向我的位置，但我认为它指向构造函数，因为还有 4 个参数.问号指向第三个位置，它是我在子类中提供的类型参数.

First thing I don't really get where the error is pointing me to, but I assume it points to the constructor since there are also 4 parameters. The question mark is pointing to the 3rd position and it is the type parameter that I provide in the child classes.

我已经查找了同类的现有问题，但提供的解决方案均不适合我.

I have looked up existing problems of the same kind but non of the provided solutions worked for me.

发出装饰器元数据的选项(切换真/假)没有帮助.

The option to emit decorators metadata (toggle true/false) did't help.

有什么建议吗?如果需要更多代码，请告诉我.提前致谢！

Any suggestions? In case more code is needed, let me know. Thanks in advance!

更新

用作参数的类(它们的声明方式):

The classes that are used as parameters (the way they are declared):

存储库

@Injectable()
export class ProductRepositoryService extends BaseRepositoryService<Product>
@Injectable()
export abstract class BaseRepositoryService<TypeModel>

它是与我的 bnackend api 通信的服务基础.它有 HttpClient 由 Angular 注入.没什么特别的.

It is a service base for communication with my bnackend api. It has HttpClient in it injected by Angular. Nothing special.

工厂服务

@Injectable()
export class ComponentFactoryService<TypeModel, TypeCollectionItem extends BaseCollectionItemComponent<TypeModel>>

此服务负责生成组件.

组件类型

export class ProductItemComponent extends BaseCollectionItemComponent<Product> implements OnInit

这是我用来显示集合的列表项的基本组件.

This is a basic component that I use to display list items of a collection.

createCollectionItemModel

export class CreateCollectionItemModel

这只是一个包含数据的类.

This is just a class to contain data.

在我看来，这整个问题与第三个参数有关，我为工厂服务提供的那种类型.我认为存在某种不匹配.我正在努力让它工作.问题部分是一般传递所需组件的类型来实例化.这是使其全部工作的代码(至少在开发模式下):

In my opinion this whole problem has something to do with the 3rd parameter, with that type I provide for the factory service. I think there is some kind of mismatch. I was wrestling with it to get it to work. The problem part was to generically pass the type of the desired component to instantiate. Here is the code that makes it all work (at least in the dev mode):

这是 BaseCollectionComponent 类调用(来自原始帖子):

createComponents(model: TypeModel[]): void {
    this.factoryService.setRootViewContainerRef(this.collectionItemsContainer);

    for (const item of model) {
      const newComponent = this.factoryService.addDynamicComponentWithModel(item, this.componentType);
      this.components.push(newComponent);
    }
  }

这是 factoryService 的完整代码:

@Injectable()
export class ComponentFactoryService<TypeModel, TypeCollectionItem extends BaseCollectionItemComponent<TypeModel>> {

  rootViewContainer: ViewContainerRef;

  constructor(@Inject(ComponentFactoryResolver) private _factoryResolver: ComponentFactoryResolver) {
  }

  setRootViewContainerRef(viewContainerRef: ViewContainerRef) {
    this.rootViewContainer = viewContainerRef;
  }

  addDynamicComponentWithModel(model: TypeModel, componentType: Type<TypeCollectionItem>): ComponentRef<TypeCollectionItem> {
    const factory = this._factoryResolver.resolveComponentFactory(componentType);
    const component = factory.create(this.rootViewContainer.parentInjector);

    this.rootViewContainer.insert(component.hostView);
    component.instance.model = model;

    return component;
  }
}

我让它工作的方式看起来有点像泛型地狱.我希望这将有助于理解这里出了什么问题.

The way I made it work is looking like somewhat generics hell. I hope this will add up to understanding what's wrong here.

推荐答案

好吧，事实证明 BaseCollectionComponent 构造函数的第三个参数确实导致了问题.我只是开始一一拔掉所有的代码位，看看问题是否消失.在我删除了 Type<...<...>> 参数(第三个)之后，我改了这个:

Well, it turns out that the 3rd argument to the BaseCollectionComponent constructor indeed caused the problem. I simply started to unplug one-by-one all the code bits and see if the problem disappears. After I have removed the Type<...<...>> parameter (thew 3rd one) and instead I changed this:

 createComponents(model: TypeModel[]): void {
    this.factoryService.setRootViewContainerRef(this.collectionItemsContainer);

    for (const item of model) {
      const newComponent = this.factoryService.addDynamicComponentWithModel(item, this.componentType);
      this.components.push(newComponent);
    }
  }

为此:

    createComponents(model: TypeModel[], type: any): void {
    this.factoryService.setRootViewContainerRef(this.collectionItemsContainer);

    for (const item of model) {
      const newComponent = this.factoryService.addDynamicComponentWithModel(item, type);
      this.components.push(newComponent);
    }
  }

问题消失了.似乎传递类型类型类型"的参数确实在某种程度上混淆了角度编译器.我还是不明白为什么会这样.如果有人能指出来?无论如何，谢谢大家的建议.

the problem disappeared. Seems that passing a parameter 'of type of type of type' did confuse the angular compiler in some way. I still don't get why would it. If someone could point it out? Anyway, thanks for suggestions everyone.

这篇关于无法解析 [组件] 的所有参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！