Angular通用分页指令配置失效，请求技术排查

问题根源分析及解决办法 #

1. 指令未在共享模块中导出 #

你的TableConfigDirective在SharedComponentsModule的declarations中声明了，但没加入exports数组，导致使用该指令的组件所在模块无法识别这个指令。

解决：
修改SharedComponentsModule，把指令加入exports：

@NgModule({
  declarations: [
    TransactionDetailsComponent,
    MyFavouritesComponent,
    OtpreuseComponent,
    GenericGridDataDownloadComponent,
    TableConfigDirective
  ],
  imports: [
    CommonModule,
    PrimengImportsModule,
    TableModule
  ],
  exports: [
    TransactionDetailsComponent,
    MyFavouritesComponent,
    OtpreuseComponent,
    GenericGridDataDownloadComponent,
    TableConfigDirective // 新增这行，导出指令
  ]
})
export class SharedComponentsModule { }

2. 生命周期钩子时机过早 #

ngOnInit阶段PrimeNG的Table组件可能还没完成初始化，直接配置属性不会生效。改用ngAfterViewInit确保视图完全初始化后再设置，同时强制表格刷新：

修改指令代码：

import { Directive, Input, AfterViewInit } from '@angular/core';
import { Table } from 'primeng/table';

@Directive({
  selector: '[appTableConfig]'
})
export class TableConfigDirective implements AfterViewInit {
  @Input() paginator: boolean = true;
  @Input() limit: number = 5;
  @Input() rowsPerPageOptions: number[] = [5, 10, 20];

  constructor(private table: Table) {}

  ngAfterViewInit() {
    this.table.paginator = this.paginator;
    this.table.rows = this.limit;
    this.table.rowsPerPageOptions = this.rowsPerPageOptions;
    // 强制表格重新渲染，应用新配置
    this.table.reset();
  }
}

3. 验证数据量是否达标 #

如果filteredConsumtionData的长度≤你设置的limit（5），PrimeNG Table会自动隐藏分页器。确保测试数据数量大于5条才能看到分页效果。

4. 确认模块导入链路正确 #

使用表格的组件所在模块，必须正确导入SharedComponentsModule（或直接导入TableModule），否则指令和表格组件都无法正常工作。

额外验证步骤 #

• 打开浏览器开发者工具，检查是否存在p-paginator元素，若存在但隐藏，排查CSS冲突；
• 在指令的ngAfterViewInit中加console.log(this.table)，确认Table实例是否正确注入；
• 手动在p-table标签上写[paginator]="true" rows="5"，验证基础分页功能是否正常，排除PrimeNG本身问题。

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