PrimeNG安裝使用

PrimeNG是Angular2的一個富客戶端組件，能夠獨立於Bootstrap單獨使用，也能夠結合Bootstrap共同使用。

官方上只有例子的介紹，並沒找到個相似入門教程一類的資料，這裏本身結合網上搜到的資料整理一份入門資料。

官網網址：https://www.primefaces.org/primeng/

我使用angular-cli生成項目

須要安裝的包有primeng、font-awesome

@angular/animations看你項目以前是否安裝過，若是沒有則須要安裝，不然會報錯

ERROR in ./~/primeng/components/panel/panel.js
Module not found: Error: Can't resolve '@angular/animations' in '/Users/xuwen/workspace/angular2/primengtest/node_modules/primeng/components/panel'
 @ ./~/primeng/components/panel/panel.js 15:19-49
 @ ./~/primeng/primeng.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:4200 ./src/main.ts

再接下來就能夠使用PrimeNG組件了

首先來配置css文件（選擇咱們須要的風格bootstrap、omega等）

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

添加所須要的模塊，在app.module.ts添加

app.module.ts代碼

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

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

import { NgModule }  from  '@angular/core';

import { FormsModule }  from  '@angular/forms';

import { HttpModule }  from  '@angular/http';

import { ConfirmDialogModule }  from  'primeng/primeng';

import { GrowlModule }  from  'primeng/primeng';

import { AppComponent }  from  './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    ConfirmDialogModule,

    BrowserAnimationsModule,

    GrowlModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export  class AppModule { }

app.component.ts代碼

import { Component }  from  '@angular/core';

import { Message }  from  'primeng/primeng';

import { ConfirmationService }  from  'primeng/primeng';

@Component({

  selector:  'app-root',

  templateUrl:  './app.component.html',

  styleUrls: [ './app.component.css'],

  providers: [ConfirmationService]

})

export  class AppComponent {

  msgs: Message[] = [];

   constructor( private confirmationService: ConfirmationService) { }

  confirm1() {

     this.confirmationService.confirm({

      message:  'Are you sure that you want to perform this action?',

      accept: ()  => {

         this.msgs = [];

         this.msgs.push({ severity:  'info', summary:  'Confirmed', detail:  'You have accepted' });

      }

    });

  }

  confirm2() {

     this.confirmationService.confirm({

      message:  'Do you want to delete this record?',

      header:  'Delete Confirmation',

      icon:  'fa fa-trash',

      accept: ()  => {

         this.msgs = [];

         this.msgs.push({ severity:  'info', summary:  'Confirmed', detail:  'Record deleted' });

      }

    });

  }

}

app.component.html代碼

< p-growl [ value]= "msgs" ></ p-growl >

    

< p-confirmDialog  width= "425" ></ p-confirmDialog >

< button  type= "button" ( click)= "confirm1()"  pButton  icon= "fa-check"  label= "Confirm" ></ button >

< button  type= "button" ( click)= "confirm2()"  pButton  icon= "fa-trash"  label= "Delete" ></ button >

最終效果