《Angular与primeNG结合》

前言：

   随着组件库的发展，前端的开发速度也提升许多，在最佳实践中，前端框架Angular可以与primeNG集成，让前端开发效率提高。预知细节如何，请听小编分解。

        

正文：

        what's the primeNG

   PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.

        

How to use the primeNG

以图表为例

Download it to your project

npm install primeng --save

explanation:

npm代表默认从国外网站上下载组件库primeNG，cnpm代表从国内网站上下载，如果网速够可以的话，可以选择npm来进行一系列的工作

--save代表此句命令会将primeNG自动写入package.json文件中，package.json相当于要安装的东西介绍，包括名称和版本，身为前端架构师要重点关注，可以了解项目的整体框架和机制。

Import

在你所想要实现的组件的module.ts文件中引入：

import {ChartModule} from 'primeng/primeng';

import {GrowlModule} from 'primeng/primeng';

@NgModule({  declarations: [     ],  imports: [    ChartModule,    GrowlModule    ],  providers: []  })

html文件中编写：

<p-growl [value]="msgs"></p-growl><p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"></p-chart>

component.ts文件：

Import:

import { Message } from "../../node_modules/._primeng@4.2.0-rc.1@primeng/primeng";

export class AppComponent {    data: any;    msgs: Message[];  constructor() {      this.data = {          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],          datasets: [              {                  label: 'First Dataset',                  data: [65, 59, 80, 81, 56, 55, 40],                  fill: false,                  borderColor: '#4bc0c0'              },              {                  label: 'Second Dataset',                  data: [28, 48, 40, 19, 86, 27, 90],                  fill: false,                  borderColor: '#565656'              }          ]      }  }  selectData(event) {      this.msgs = [];      this.msgs.push({severity: 'info', summary: 'Data Selected', 'detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});  }}

完成组件库的引用只需要四步走战略，便可自由使用primeNG组件库的资源。

结语：

       其实没有难，不信你试试。