手把手建項目 PrimeNG安裝使用

手把手建項目 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的開發者模式進行調試差錯。