2017-12-03 17 views
1

一般的なコンポーネントでは、私はこの不思議なことを言っています: '角:[path/base-collection.component.tsのBaseCollectionComponentのすべてのパラメータを解決できません: ?[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); 
    } 
    } 
} 

基本的に、このコンポーネントを注入させますコレクション用の子リストアイテムコンポーネント。

エラーがどこに向いているのか分かりませんが、4つのパラメータがあるので、コンストラクタを指していると思います。疑問符は3番目の位置を指しています。これは子クラスで提供する型パラメータです。

私は同じ種類の既存の問題を検索しましたが、提供されたソリューションのうちのどれも私のために働いていませんでした。

デコレータのメタデータを表示するオプション(true/falseを切り替える)が役に立たなかった。

提案がありますか? もっとコードが必要な場合は、教えてください。 ありがとうございます!

UPDATE

パラメータとして使用されるクラス(それらが宣言されている方法):

リポジトリ

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

それは私のbnackendとの通信のためのサービス拠点でありますAPI。 HttpClientにAngularによって注入されています。特にない。

factoryService

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

このサービスは、産卵コンポーネントの世話をします。

たcomponentType

export class ProductItemComponent extends BaseCollectionItemComponent<Product> implements OnInit 

これは私がコレクションのリスト項目を表示するために使用する基本的なコンポーネントです。

createCollectionItemModel

export class CreateCollectionItemModel 

これは、データを格納するためだけのクラスです。

私の意見では、この全体的な問題は3番目のパラメータと関係があり、そのタイプは工場サービスに提供します。私はある種の不一致があると思います。私はそれを働かせるためにそれと格闘していました。問題の部分は、インスタンス化する目的のコンポーネントのタイプを一般的に渡すことでした。ここで(少なくともDEVモードで)すべての作業するコードは次のとおりです。

これは、(オリジナルのポストから)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; 
    } 
} 

方法は多少ジェネリック地獄のように見えています。ここで何が間違っているのかを理解するためにこれが追加されることを願っています

答えて

0

これは@注入可能ではないため、依存性注入を使用することはできません。

+0

それはどういう意味ですか?このコンポーネントは拡張されており、注入されていません。しかし**リポジトリ**と** factoryService **は** @ Injectable(**)で装飾されています。より具体的にお願いしますか? –

+0

@GeorgeVasilchenko、申し訳ありません。最後の3つのパラメータは、Injectable()で修飾されたサービスではありません。コンポーネントに注入することはできません。 – Christian

0

まあ、BaseCollectionComponentコンストラクタの3番目の引数が実際に問題を引き起こしたことが分かります。 私は単純にすべてのコードビットを1つずつ取り外して、問題が消えるかどうかを確認し始めました。私はタイプ< ... < ... >>パラメータ(thew第三1)を削除して、代わりに私は、この変更後:これまで

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); 
    } 
    } 

を。パラメータ '型の型の型'を渡すと、何らかの方法で角型コンパイラが混乱したようです。私はまだそれがなぜ得られないのですか?誰かがそれを指摘できたら?とにかく、みんなの提案に感謝します。

関連する問題