手把手建項目 PrimeNG安裝使用

之前寫過一片關于PrimeNG的安裝使用，當時也是接觸不久，最近重新使用的時候發現還是有一些東西沒有說清楚。

當時用的是Angular2現在已經是Angular4+了，并且angular-cli也更新了，所以有時候在網上查到的別人的經驗可能放在現在并不好用，我們在使用的時候一定要注意版本。

先上一張因為angular版本和primeng版本不匹配導致的編譯異常。

這個問題是使用如下命令安裝的primeng

看一下不匹配的package.json，注意angular和primeng的版本。

言歸正傳，開始我們的安裝

安裝angular-cli

當你看到這篇文章的時候angular-cli的版本可能和我的不一樣，再說一下：注意版本。

首先貼一下我的cli的版本信息

使用angular-cli創建項目。

這個就不用多說了，直接ng new projectName就好了。

angular版本可以在上面ng version看到是4.4.6。

安裝所需要的依賴項目。

這里所說的依賴是PrimeNG必須的依賴，其他的根據項目需求可慢慢增加。再次強調：注意版本。

package.json文件dependencies下添加依賴項

"@angular/animations": "^4.4.6", "font-awesome": "^4.7.0", "primeng": "^4.0.0"

使用npm命令更新 npm install

添加樣式引用

在.angular-cli.json中的styles添加

"../node_modules/primeng/resources/themes/omega/theme.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/primeng/resources/primeng.min.css"

或者在src/styles.css文件中添加

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

修改項目文件

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 { InputTextModule } from 'primeng/primeng'; import { ButtonModule } from 'primeng/primeng'; import { ConfirmDialogModule } from 'primeng/primeng';import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,BrowserAnimationsModule,FormsModule,HttpModule,InputTextModule,ButtonModule,ConfirmDialogModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

app.component.ts

import { Component } from '@angular/core'; import { ConfirmationService, Message } from "primeng/components/common/api";@Component({selector: 'app-root',template: `<h1>Hello from PrimeNG!</h1><input type="text" pInputText placeholder="Enter your name"(change)="onChangeEvent($event)" /><button pButton type="text" (click)="greetMe()" icon="fa-check" label="Greet me"></button><p> {{theUserSaid}}<p-confirmDialog width="400"></p-confirmDialog>`,providers: [ConfirmationService] }) export class AppComponent {name: string;userResponse: Message[]=[];theUserSaid: string;constructor(private confirmationService: ConfirmationService) {}onChangeEvent({target}){this.name = target.value;}greetMe(){this.confirmationService.confirm({message: ` Hey ${this.name}, do you like PrimeNG?`,header: 'Greeting',icon: 'fa fa-question-circle',accept: () => {this.userResponse = [];this.userResponse.push({severity:'info', summary:'Confirmed', detail:'I like PrimeNG'});this.theUserSaid = this.name + " responded " + this.userResponse[0].detail;},reject: () => {this.userResponse = [];this.userResponse.push({severity:'info', summary:'Rejected', detail:'I don\'t really like PrimeNG'});this.theUserSaid = this.name + " responded " +this.userResponse[0].detail;}});} }

成功

其他

補充個package.json版本號解釋

碰到問題多使用chrome的開發者模式進行調試差錯。

轉載于:https://www.cnblogs.com/bh4lm/p/8623587.html

總結

以上是生活随笔為你收集整理的手把手建项目 PrimeNG安装使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。