《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文件中编写：

component.ts文件：

Import:

import { Message } from "../../node_modules/[email protected]@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组件库的资源。

结语：

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