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

【问题标题】：angular2 ag-grid-ng2 how to embed (default/custom) filter input in header cellangular2 ag-grid-ng2 如何在标题单元格中嵌入（默认/自定义）过滤器输入
【发布时间】：2017-06-27 23:56:44
【问题描述】：

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

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

问题解决了。实际上，随着 ag-grid 到版本 8 的最新更新以及 ag-grid-ng2 模块的更新，可以通过自定义组件指定标题单元格。任何自定义过滤器都可以创建为组件并附加到所需的 columnDef。更多细节肯定可以在专门为不同框架更新的 ag-grid 文档中找到 (angular2 ag-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);
        }
    }

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

【讨论】：