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
>
最終效果
