Angular已有工程中如何使用PrimeNG

标签: Angular使用各种框架

1、首先npm install primeng --save

npm install -save ( 会将模块依赖写入dependencies 节点,是运行时依赖,像 express 这些模块是项目运行必备的是开发时依赖。)

npm install -save -dev (会将模块依赖写入devDependencies 节点,项目部署后就不需要了,比如项目中使用的 gulp ,压缩css、js的模块)

 

2、npm install @angular/animations --save

3、npm install [email protected] --save

 

安装完成后你的文件里面就会多这两个东西

4、去到文件里面引入样式

当然你也可以在这里面添加

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

都一样,随便你自己。

5、然后去到你的文件里面

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

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

引入动画模块。

然后我们用button组件测试一下primeng是不是能用了。

  • import {ButtonModule} from 'primeng/button'
  • html文件中

    <button pButton type="button" label="Click"></button>

    <p-button label="Click"></p-button>

  • 运行结果

 

好了,可以用了。接下来开始你的表演吧!

具体的安装方法https://www.primefaces.org/primeng/#/setup这里写得更清楚~~

原文链接:加载失败,请重新获取