PrimeNG start

最新推荐文章于 2022-01-27 16:28:56 发布

Jacky-Liu999

最新推荐文章于 2022-01-27 16:28:56 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular primeNG

本文链接：https://blog.youkuaiyun.com/hotboyboy/article/details/90108307

Angular 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何在Angular项目中安装并配置Primeng组件库，包括必要的npm包安装、angular.json文件样式配置更新及模块导入过程。特别注意与现有组件库如nz-zorro的冲突解决方法。

1 install

npm install primeng --save
npm install primeicons --save
npm install @angular/animations --save

在这里插入图片描述
2 angular.json style configurations

"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
]

在这里插入图片描述
因为我app已经有了字体样式；只需

"styles": [
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
]

3 imporot

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {TableModule} from 'primeng/table';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

因为我的app已经适用了nz-zorro，所以只要

import {TableModule} from 'primeng/table';

不然会报冲突 eror
参考连接：
https://www.primefaces.org/primeng/#/setup