修复primeng样式在Angular中不工作的问题的方法

迪鲁宾
474 阅读2分钟

这篇文章是针对以下不同问题的解决方案：

  • 主题不能正确加载
  • Primeng组件的样式不能正确应用
  • Angular从一个版本升级到另一个版本时，css样式被破坏。
  • Primeng最新版本的整合

这篇文章是我在Angular应用程序中整合primeng组件的发现。

这些解决方案将适用于Angular 2+版本，包括Angular 10和11版本。

Primeng样式

如果在Angular应用程序中缺少primeng样式，那就很难解决。

它提供了可重复使用的组件，如按钮、上传、输入控制小部件。

每个组件的样式都与三样东西相关联。

在Angular应用程序中，Primeng和图标是通过npm命令安装的，如下图所示

npm install primeng --save
npm install primeicons --save

这将两个依赖项安装到node_modules项目中。

你可以查看Primeng的css样式，如下图所示primeng theme css styles not loading

主题样式

默认情况下，这些框架提供了各种主题，如nova-blue,bootstrap,luna-blue等。你可以在下面查看更多的主题。

primeng global icon css styles not working

全局css样式 它提供了primeng.min.css全局css样式，是primeng的每个组件所需要的。

图标样式像fontawesome图标套件一样，它在primicons.css文件中提供内置的图标。

样式

如何解决primeng css样式在Angular中不工作的问题？

所以你必须在Angular应用程序中包含主题、全局和图标样式。

有多种方法可以在Angular typescript应用程序中加载样式。

以下是三种不同的方法，我们可以做。

Angular.json

请在Angular.json的样式部分添加css文件的位置。

在Angular.json文件中，样式属性的路径是 "architect"-"test"-"style"，但是在同一个文件中还有一个样式部分，即不是正确的路径，所以这些文件没有被添加到 "architect"-"build"-"style "中。

{
    "architect": {
        "test": {
             "styles": [
                      "src/styles.css",
                      "node_modules/primeng/resources/themes/nove-light/theme.css",     "node_modules/primeng/resources/primeng.min.css",
                      "node_modules/primeicons/primeicons.css"
                      ],
                }
              }
}

使用链接样式第二种方法是在index.html中使用链接添加，就像一个普通的应用程序。

CSS导入

在Angular应用程序中,

你必须使用css @import来包含任何外部css样式。

如果你想让css样式在全局范围内应用，可以把它添加到style.css中 其他方式，你可以添加到Angular组件中加载并应用到每个组件。

 @import "node_modules/primeng/resources/themes/nove-light/theme.css";
 @import "node_modules/primeng/resources/primeng.min.css";
 @import  "node_modules/primeicons/primeicons.css";

总结

对于基础用户来说，解决Angular应用程序中的css问题是非常困难的。这篇博客讲述了primeng css样式文件，问题和解决方案。

有多种方法可以将css集成到应用程序中，并选择适合你的最佳方法。

avatar
文章
阅读
粉丝