修改Primeng Paginator的模板答案

【问题标题】：changing the template of Primeng Paginator修改Primeng Paginator的模板
【发布时间】：2018-11-27 18:38:16
【问题描述】：

我在我的项目中使用primeng 组件。但我想对paginator 组件的模板进行一些更改。我制作了一个扩展primeng 的paginatorcomponent 的新组件，并在@Component 中添加了新模板。但是其他一些primeng 组件使用paginator 组件进行分页，例如dataview。有没有办法让这些组件可以使用这个新的扩展版本组件？

【问题讨论】：

你想达到什么目的？您只想更改分页器的样式吗？
是的，我想更改分页器的模板。尽管我应该对其他组件进行一些更改，例如 dataview 中的过滤器方法等...

标签： angular inheritance primeng

【解决方案1】：

当您想更改所有primeng组件样式时，您可以更改导入到项目中的primeng css主题。

您可以通过更改angular.json中导入的css来更改primeng模板。查找angular.json文件，在styles中，更改primeng主题css（应该是这个样子）：

"styles": [
     ...
     "node_modules/primeng/resources/themes/nova-light/theme.css",
     ...
]

将 - node_modules/primeng/resources/themes/nova-light/theme.css - 或您正在使用的任何主题更改为不同的主题文件夹名称。

当您想根据需要更改特定组件时，您可以添加 css 代码来覆盖primeng css的默认样式。

Primeng 为您提供要覆盖的类，以便根据需要设置其组件的样式。例如查看primeng - dropdown docs，您可以找到一个名为“样式”的部分，显示所有相关的css 类以覆盖您需要的组件样式。

我创建了一个sample project，您可以在其中看到我已经更改了下拉菜单的图标。

【讨论】：

模板是指结构，而不是样式。例如我想更改图标，它们在primeng paginator的模板代码中。
我已经编辑了我的答案来解释你是如何做到的。
完全不相关的答案。他说的是 Angular 模板，而你说的是 CSS 样式。