手把手建項(xiàng)目 PrimeNG安裝使用

之前寫過一片關(guān)于PrimeNG的安裝使用，當(dāng)時(shí)也是接觸不久，最近重新使用的時(shí)候發(fā)現(xiàn)還是有一些東西沒有說清楚。

當(dāng)時(shí)用的是Angular2現(xiàn)在已經(jīng)是Angular4+了，并且angular-cli也更新了，所以有時(shí)候在網(wǎng)上查到的別人的經(jīng)驗(yàn)可能放在現(xiàn)在并不好用，我們?cè)谑褂玫臅r(shí)候一定要注意版本。

先上一張因?yàn)閍ngular版本和primeng版本不匹配導(dǎo)致的編譯異常。

這個(gè)問題是使用如下命令安裝的primeng

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

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

安裝angular-cli

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

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

使用angular-cli創(chuàng)建項(xiàng)目。

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

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

安裝所需要的依賴項(xiàng)目。

這里所說的依賴是PrimeNG必須的依賴，其他的根據(jù)項(xiàng)目需求可慢慢增加。再次強(qiáng)調(diào)：注意版本。

package.json文件dependencies下添加依賴項(xiàng)

"@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";

修改項(xiàng)目文件

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;}});} }

成功

其他

補(bǔ)充個(gè)package.json版本號(hào)解釋

碰到問題多使用chrome的開發(fā)者模式進(jìn)行調(diào)試差錯(cuò)。

轉(zhuǎn)載于:https://www.cnblogs.com/bh4lm/p/8623587.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。