1.第一步把依賴添加到項目中

?

npm install primeng --save

npm install @angular/animations --save

npm install font-awesome@4.7.0 --save

2.在.angular-cli.json中添加

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

3.在app.module.ts中添加以下模塊

?

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

import { NgModule } from '@angular/core';import { AppComponent } from './app.component'; import {FormsModule} from "@angular/forms"; import {HttpModule} from "@angular/http"; import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; import {ButtonModule, InputTextModule} from "primeng/primeng";@NgModule({declarations: [AppComponent],imports: [BrowserModule,FormsModule,HttpModule,BrowserAnimationsModule,InputTextModule,ButtonModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { } 4.在app.component.ts中添加 import {Component} from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {constructor( ) { }name: string;message: string;onClick() {this.message = "Hello , " + this.name;} } 5.在app.component.html中添加 <input type="text" [(ngModel)]="name" pInputText><button type="button" pButton label="Click" icon="fa fa-check" (click)="onClick($event)"></button><div>{{message}}</div> 測試結果：

?

? ? ? ? ? ? ? ?

?

初學勇的博客隨筆

總結

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

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