使用 ag-grid 在 Angular 2 中注入组件会引发错误

Question

我正在使用数据库和 ag-grid 构建 Angular 2 应用程序。 运行应用程序时出现此错误：

“无法解析 PartialMatchFilterComponent 的所有参数：(WorkorderService, ParseLinks, ?)”

错误中的问号是我要使用的组件，因为在该组件中有我要使用的功能。我测试了注入其他组件，它们工作正常。

这是我试图在 PartialMatchFilterComponent 组件中注入的组件。

import {Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core'
import { FormsModule } from '@angular/forms';
import {WorkorderService} from "../../../services/workorder.service";
import {workorder} from "./workorder";
import {ParseLinks} from "../../../services/parse-links.service";
import {GridOptions} from 'ag-grid/main';
import {PartialMatchFilterComponent} from "./filter";


@Component({
selector: 'workorder',
templateUrl: 'app_admin/administrator/components/entities/workorder/workorder.html',
providers: [PartialMatchFilterComponent]

})
export class WorkorderComponent{

private gridOptions: GridOptions
private showGrid: boolean;
private rowCount: string;
private columnDefs: any[];
private listData = [];


rows;
total: number;
links;
even

ngOnInit(){
    this.test()
}

constructor(private workorderservice: WorkorderService, private parselink : ParseLinks) {
    this.gridOptions = <GridOptions>{};
    this.createColumnDefs();
    this.showGrid = true;
    this.rows

    this.gridOptions = <GridOptions>{
        onGridReady: () => {
            console.log(this.gridOptions.api)
            this.gridOptions.api.sizeColumnsToFit();

        }


    }
}

test(){
    this.workorderservice.searchWorkorders(1, 20, {sort: {}, search: {predicateObject: {}}, pagination: {start: 0}})
        .subscribe(
            data => this.rows = data.json()
        )
}


filterFunction(newValue){

    this.workorderservice.searchWorkorders(1, 20, {sort: {}, search: {predicateObject: {'workorder.location.street': newValue}}, pagination: {start: 0}})

        .subscribe(data =>{ this.rows = data.json()
            this.links = this.parselink.parse(data.headers.get('link'))
            console.log(this.rows)
        })

}
createColumnDefs()  {
  this.columnDefs =[
        { headerName: "ID", field: "id", width:80},
        { headerName: "Extern id", field: "externalRefId", width:150},
        { headerName: "Naam", field: "customerLastName", width:80},
        { headerName: "Straat", field: "workorderStreet", width:100,
            filterFramework: {
            component: PartialMatchFilterComponent,
            moduleImports: [FormsModule]
        }},
        { headerName: "Huisnr", field: "workorderHousenumber", width:100 },
        { headerName: "Toev", field: "workorderHousenumberAdd", width:80},
        { headerName: "Postcode", field: "workorderZip", width:150},
        { headerName: "Plaats", field: "workorderCity", width:80},
        { headerName: "Telefoon", field: "customerPhone", width:100 },
        { headerName: "Product", field: "type", width:100} ,
        { headerName: "Status", field: "status", width:150},
        { headerName: "Project", field: "project", width:80}
    ]

}

}

这是PartialMatchFilterComponent组件类：

import {Component,ViewChild, ViewContainerRef} from '@angular/core'
import {IFilterParams, RowNode,IDoesFilterPassParams,     IAfterFilterGuiAttachedParams} from 'ag-grid/main';
import {AgFilterComponent} from 'ag-grid-ng2'
import {WorkorderComponent} from "./workorder.component";
import {WorkorderService} from "../../../services/workorder.service";
import {ParseLinks} from "../../../services/parse-links.service";



@Component({
selector: 'filter-cell',
template: `
    Filter: <input style="height: 20px" #input (ngModelChange)="onChange($event)" [ngModel]="text">
`,
providers: [WorkorderService, ParseLinks]
})
export class PartialMatchFilterComponent implements AgFilterComponent {
private params:IFilterParams;
private valueGetter:(rowNode:RowNode) => any;
private text:string = '';


constructor(private workorderservice : WorkorderService, private parselink : ParseLinks, private workorder: WorkorderComponent){}

@ViewChild('input', {read: ViewContainerRef}) private input;


agInit(params:IFilterParams):void {
    this.params = params;
    this.valueGetter = params.valueGetter;
}

isFilterActive():boolean {
    return this.text !== null && this.text !== undefined && this.text !== '';
}

doesFilterPass(params:IDoesFilterPassParams):boolean {
    return this.text.toLowerCase()
        .split(" ")
        .every((filterWord) => {
            return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
        });
}

getModel():any {
    return {value: this.text};
}

setModel(model:any):void {
    this.text = model.value;
}

afterGuiAttached(params:IAfterFilterGuiAttachedParams):void {
    this.input.element.nativeElement.focus();
}

componentMethod() {
    return this.text
}

onChange(newValue):void {
    if (this.text !== newValue) {
        console.log(newValue)
        this.text = newValue;
        this.params.filterChangedCallback();
    }
}
}

我找到了错误的来源，但我不知道如何解决这个问题。错误发生在 WorkorderComponent 中名为 CreateColomnDefs() 的方法中。这段代码：

 filterFramework: {
        component: PartialMatchFilterComponent,
        moduleImports: [FormsModule]

如果我删除了我在 filterFramework 中声明组件的行，那么应用程序可以工作，但过滤器不能工作。

Answer 1

尝试添加 WorkorderComponent 作为依赖项：

filterFramework: {
    component: PartialMatchFilterComponent,
    moduleImports: [FormsModule],
    dependencies: [WorkorderComponent]