angular项目中使用Primeng

1.第一步把依赖添加到项目中

npm install primeng --save

npm install @angular/animations --save

npm install [email protected] --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>

测试结果：