Angular 8中如何在PrimeNG的Paginator分页组件内插入图片

PrimeNG 8的Paginator组件支持自定义左右两侧内容模板，直接通过对应属性绑定带图片的自定义模板即可实现需求，具体实现步骤如下：

• 第一步：编写HTML模板代码
  在组件的html文件中先定义自定义内容模板，再绑定到Paginator组件的对应属性上，示例代码：

<!-- 自定义内容模板，可直接插入img标签展示图片 -->
<ng-template #customPaginatorLeft>
  <img src="你的图片资源路径" alt="分页自定义图标" style="height: 22px; vertical-align: middle; margin-right: 10px;">
  <span>共 {{total}} 条记录</span>
</ng-template>

<!-- 分页组件绑定自定义模板 -->
<p-paginator 
  [rows]="pageSize"
  [totalRecords]="total"
  [rowsPerPageOptions]="[10, 20, 50]"
  [leftContent]="customPaginatorLeft"
  showCurrentPageReport="true"
  currentPageReportTemplate="第 {currentPage} 页 / 共 {totalPages} 页">
</p-paginator>

• 第二步：编写TS组件逻辑
  在对应的component.ts文件中声明分页需要用到的变量：

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo-page',
  templateUrl: './demo-page.component.html'
})
export class DemoPageComponent {
  // 每页显示条数
  pageSize = 10;
  // 总数据条数，实际使用时替换为接口返回的真实数值
  total = 142;
}

• 第三步（可选）：调整样式适配
  如果需要调整图片和分页控件的对齐、间距等样式，可以使用深度选择器覆盖默认样式：

::ng-deep .p-paginator .p-paginator-left-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

注意事项 #

• 如果需要把图片放在分页右侧，只要把模板绑定到rightContent属性即可。
• 本地静态图片建议放在Angular项目的assets目录下，路径填写/assets/图片文件名.后缀即可正常加载。
• 不要使用PrimeNG高版本的插槽语法，V8版本仅支持通过leftContent/rightContent属性绑定模板引用。

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