如何为ngx-datatable创建可全局复用的自定义footer组件？

我希望为所有ngx-datatable表格使用自定义footer，参考官方的footer实现方式。现在的问题是不想在每个组件里重复编写HTML，因此想要创建<app-custom-footer>组件来封装默认的<ngx-datatable-footer>，并按如下方式使用：

<ngx-datatable
        class="material"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="ColumnMode.force"
        [footerHeight]="100"
        [headerHeight]="50"
        rowHeight="auto"
      >
      <app-custom-footer [rows]="rows"></app-custom-footer>
      </ngx-datatable>
    </div>

请问这个需求是否可以实现？

完全可以实现，具体步骤如下：

1. 创建自定义Footer组件 #

生成CustomFooterComponent，在组件模板中封装通用的ngx-datatable-footer逻辑与样式，比如分页控件、数据统计等你需要的通用内容：

<!-- custom-footer.component.html -->
<ngx-datatable-footer>
  <!-- 通用分页控件 -->
  <ngx-datatable-pager
    [pagerLeftArrowIcon]="'prev'"
    [pagerRightArrowIcon]="'next'"
    [pagerPreviousIcon]="'skip_previous'"
    [pagerNextIcon]="'skip_next'"
    [page]="table.page"
    [size]="table.size"
    [count]="table.totalElements"
    (change)="table.onPage($event)"
  ></ngx-datatable-pager>
  <!-- 数据统计信息 -->
  <div class="datatable-footer-count">
    共 {{ table.totalElements }} 条数据，当前显示第 {{ table.firstRowOnPage + 1 }}-{{ table.lastRowOnPage }} 条
  </div>
</ngx-datatable-footer>

在组件类中，通过@Host自动获取父级ngx-datatable实例，无需手动传递分页相关参数：

// custom-footer.component.ts
import { Component, Host } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-custom-footer',
  templateUrl: './custom-footer.component.html',
  styleUrls: ['./custom-footer.component.scss']
})
export class CustomFooterComponent {
  constructor(@Host() public table: DatatableComponent) { }
  
  // 若需手动传入数据，可保留输入属性
  // @Input() rows: any[];
}

2. 在模块中声明并导出组件 #

确保自定义组件在Angular模块中声明并导出，以便其他组件可以引用：

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { CustomFooterComponent } from './custom-footer/custom-footer.component';

@NgModule({
  declarations: [CustomFooterComponent],
  imports: [
    CommonModule,
    NgxDatatableModule
  ],
  exports: [CustomFooterComponent]
})
export class SharedModule { }

3. 在表格中使用自定义Footer #

按照你预期的方式直接使用即可，注意设置合适的footerHeight避免内容截断：

<ngx-datatable
  class="material"
  [rows]="rows"
  [columns]="columns"
  [columnMode]="ColumnMode.force"
  [footerHeight]="100"
  [headerHeight]="50"
  rowHeight="auto"
>
  <app-custom-footer></app-custom-footer>
</ngx-datatable>

额外说明 #

• 通过@Host获取父级表格实例是最便捷的交互方式，无需手动传递分页事件与数据。
• 可根据需求为自定义Footer添加输入属性，支持少量个性化配置（比如是否显示数据统计）。

内容的提问来源于stack exchange，提问作者Arti