angular2 ag-grid-ng2如何在标题单元格中嵌入(默认/自定义)过滤器输入

Question

我试图为我的网格创建自定义标题单元格，并希望将用于过滤的输入类型嵌入标题单元格中，而不是单击菜单按钮。是否可以将菜单部分下的筛选器和其他字段移动到标题单元格中？

Answer 1

问题已解决。实际上，随着ag网格到版本8的最新更新以及ag-grid-ng2模块的更新，可以通过自定义组件指定标题单元格。任何自定义过滤器都可以创建为组件，并附加到所需的列Def。更多细节可以在专门为不同框架更新的ag网格文档中找到(angular2ag-grid-docs)。为了解决这个问题，我为不同的列类型和过滤器类型创建了一个工厂，如下所示：

colDef = {
...
filterFramework: PartialFilterComponent as {new(): PartialFilterComponent},
headerComponentFramework: HeaderCellComponent as {new(): HeaderCellComponent},
headerComponentParams: {
anyCustomParams: this.customParams
},
cellRendererFramework: CellRendererComponent as {new(): CellRendererComponent},
...
};

请注意，您必须在模块声明和AgGridModule.withComponents([])导入中注册注入的组件。此外，过滤器组件将提供标题组件，如下所示：

public agInit(params: ISmartHeaderParams): void {
this.params = params;
this.colDef = this.params.column.getColDef();
let field = this.params.column.getColId();
let agGridFilter = this.gridOptions.api.getFilterInstance(field);
this.filterInstance = agGridFilter.getFrameworkComponentInstance();
}

将输入字段添加到标头组件：

<input #input (ngModelChange)="onChange($event)" [ngModel]="text">

然后调用filterInstance方法进行如下搜索：

public onChange(newValue: any): void {
if (this.text!== newValue) {
this.text= newValue;
this.filterInstance.onChange(newValue);
}
}

列数据将按每列的方式进行筛选。您现在可以应用任何筛选方法或创建任何自定义标头组件。我想目前这些部分都有很好的文档记录，并且有很好例子。