2017-12-03 4 views
1

In meiner generischen Komponente habe ich dieses seltsame Sprichwort: 'Angular: Kann nicht alle Parameter für BaseCollectionComponent' in [path/base-collection.component.ts: (? [object.Object], [object.Object], [object.Object])] 'Kann nicht alle Parameter für [Component]

Hier ist der Code der Komponente:

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

Grundsätzlich ist dieser Komponente einzuspritzen gemacht wird, die Kinder List-Elemente Komponenten für Sammlungen.

Das erste, was ich nicht wirklich bekomme, wo der Fehler mich hinweist, aber ich nehme an, es zeigt auf den Konstruktor, da es auch 4 Parameter gibt. Das Fragezeichen verweist auf die dritte Position und es ist der Typparameter, den ich in den untergeordneten Klassen zur Verfügung stelle.

Ich habe bestehende Probleme der gleichen Art nachgeschlagen, aber nicht von den bereitgestellten Lösungen für mich gearbeitet.

Die Option zum Senden von Dekoratormetadaten (toggle true/false) hat nicht geholfen.

Irgendwelche Vorschläge? Falls mehr Code benötigt wird, lassen Sie es mich wissen. Vielen Dank im Voraus!

UPDATE

Die Klassen, die als Parameter verwendet werden (die Art, wie sie deklariert sind):

Repository

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

Es ist ein Service-Stützpunkt für die Kommunikation mit meinem bnackend api. Es hat HttpClient von Angular injiziert. Nichts Besonderes.

factoryService

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

Dieser Service kümmert sich um Laich Komponenten.

component

export class ProductItemComponent extends BaseCollectionItemComponent<Product> implements OnInit 

Dies ist eine grundlegende Komponente, die ich Liste angezeigt werden Elemente in einer Sammlung verwenden.

createCollectionItemModel

export class CreateCollectionItemModel 

Dies ist nur eine Klasse Daten enthalten.

Meiner Meinung nach hat dieses ganze Problem etwas mit dem 3. Parameter zu tun, mit diesem Typ, den ich für den Werksdienst anbiete. Ich denke, es gibt eine Art Missverhältnis. Ich habe damit gerungen, um es zur Arbeit zu bringen. Der Problemteil bestand darin, den Typ der gewünschten zu generierenden Komponente generisch zu übergeben.Hier ist der Code, den sie alle arbeiten (zumindest in dem Entwickler-Modus) macht:

Dies ist der BaseCollectionComponent Klasse Anruf (aus dem Original-Beitrag):

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

Hier wird die factoryService voll Code:

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

Die Art und Weise habe ich es Arbeit wie etwas Generika Hölle sucht. Ich hoffe, das wird dazu beitragen, zu verstehen, was hier falsch ist.

Antwort

0

Es ist kein @Injectable, daher können Sie die Abhängigkeitsinjektion nicht verwenden.

+0

Was meinst du damit? Diese Komponente wird erweitert, es wird nicht injiziert. Das ** Repository ** und ** factoryService ** sind jedoch mit ** @ Injectable() ** dekoriert, da ich davon ausgehe, dass sie injiziert werden. Wären Sie bitte genauer? –

+0

@GeorgeVasilchenko, sorry. Die letzten drei Parameter sind keine Services, die mit Injectible() dekoriert sind, korrekt? Sie können nicht in die Komponente injiziert werden. – Christian

0

Nun, es stellt sich heraus, dass das dritte Argument des BaseCollectionComponent-Konstruktors tatsächlich das Problem verursacht hat. Ich fing einfach an, alle Codebits einzeln zu entfernen und zu sehen, ob das Problem verschwindet. Nachdem ich den Typ < entfernt ... < ... >> Parameter (thew 3. eins) und stattdessen änderte ich dies:

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

dazu:

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

das Problem verschwunden. Scheint, dass die Übergabe eines Parameters 'vom Typ des Typs' den Winkelkompilierer in irgendeiner Weise verwirrte. Ich verstehe immer noch nicht warum. Wenn jemand darauf hinweisen könnte? Wie auch immer, danke für alle Vorschläge.

Verwandte Themen