Angular Web 开发使用PrimeNG的UI组件

最新推荐文章于 2025-07-23 11:38:36 发布

原创最新推荐文章于 2025-07-23 11:38:36 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular #PrimeNG

Angular 同时被 2 个专栏收录

8 篇文章

订阅专栏

Angular

5 篇文章

订阅专栏

本文介绍了如何通过npm安装PrimeNG及其依赖项，并配置Angular应用以启用动画效果和字体图标，确保用户获得良好的交互体验。

PrimeNG官网：点击打开链接

加载

PrimeNG在npm上可用，如果现有的应用程序运行以下命令将其下载到项目。

npm install primeng --save

Angular 4+动画

各种组件利用angular动画来改善用户体验，从Angular 4开始，动画具有自己的模块，因此需要将BrowserAnimationsModule导入到应用程序中。如果不想使用NoopAnimationsModule。

npm install @angular/animations --save

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class YourAppModule { }

字体图标

PrimeNG使用font-awesome作为字体图标.

npm install font-awesome --save

加载样式

修改src/styles.scss

@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeng/resources/themes/omega/theme.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";