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

问题描述

在我的通用组件中，我这样蠕动地说: "角度:无法解析BaseCollectionComponent的所有参数"，位于[path/base-collection.component.ts:([[object.Object]，[object.Object]，?，[object.Object])]] '

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.

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

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通信的服务基础.它具有Angular注入的HttpClient.没什么特别的.

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>>

此服务负责生成组件.

componentType

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.

在我看来，整个问题与第3个参数有关，我为工厂服务提供了该类型.我认为有些不匹配.我正在努力使它工作.问题部分是一般地传递​​要实例化的所需组件的类型.这是使它们全部运行的代码(至少在开发模式下有效):

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.

推荐答案

它不是@Injectable，因此您不能使用依赖项注入.

It isn't an @Injectable, thus you can't make use of dependency injection.

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