简介
来自PrimeFaces的PrimeNG是一个替代的UI组件库。它为数据呈现、表单输入、菜单、图表、覆盖等提供了一系列预置主题和用户界面组件。
在本文中，您将在Angular 4+项目中设置PrimeNG，并探索一些主要组件。
前提条件
如果你想跟随这篇文章，你将需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
- 本教程还假定您已在全球范围内安装了
@angular/cli。
本教程通过了Node v16.6.1、npmv7.20.3、@angular/corev12.2.0、primengv12.0.1、primeiconsv4.1.0验证。
设置项目
您可以使用@ANGLE/CLI创建一个新的角度投影。
在您的终端窗口中，使用以下命令：
1ng new AngularPrimeNGExample --style=css --routing=false --skip-tests
这将配置一个新的角度项目，将样式设置为)，不布线，并跳过测试。
导航到新创建的项目目录：
1cd AngularPrimeNGExample
首先，安装所需的包：primeng和primeicons到你的项目中：
1npm install [email protected] [email protected]
在这一点上，您有了一个新的带有primeng和primeics的角度投影。
添加PrimeNG样式
接下来，将所需的CSS文件作为角度CLI加载的样式的一部分添加：
1[label angular.json (partial)]
2...
3"styles": [
4 "styles.css",
5 "node_modules/font-awesome/css/font-awesome.min.css",
6 "node_modules/primeng/resources/primeng.min.css",
7 "node_modules/primeng/resources/themes/saga-blue/theme.css"
8],
9...
<$>[备注]
**注意：添加到angular.json配置文件后，需要重启本地服务器。
<$>
这里我们使用的是saga-Blue‘主题，但您可以在nova’、lea或`fluent-light‘等可用主题中进行选择。
导入PrimeNG组件
现在，让我们设置我们的应用程序模块，以包括我们想要的UI组件：
1[label src/app/app.module.ts]
2import { NgModule } from '@angular/core';
3import { BrowserModule } from '@angular/platform-browser';
4
5import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6import { FormsModule } from '@angular/forms';
7
8import { AccordionModule } from 'primeng/accordion';
9import { PanelModule } from 'primeng/panel';
10import { ButtonModule } from 'primeng/button';
11import { RadioButtonModule } from 'primeng/radioButton';
12
13import { AppComponent } from './app.component';
14
15@NgModule({
16 declarations: [
17 AppComponent
18 ],
19 imports: [
20 BrowserModule,
21 BrowserAnimationsModule,
22 FormsModule,
23 AccordionModule,
24 PanelModule,
25 ButtonModule,
26 RadioButtonModule
27 ],
28 providers: [],
29 bootstrap: [AppComponent]
30})
31export class AppModule { }
注意，我们还导入了ANGLE的BrowserAnimationsModule和FormsModule。动画模块是PrimeNG的组件所必需的，表单模块是使用表单输入组件(如单选按钮组件)所必需的。
至此，您有了一个新的角度项目，支持AccordionModule、PanelModule、ButtonModule和RadioButtonModule。
使用PrimeNG组件构建App
下面是一个使用PrimeNG的accordion、panel、Radio Button和Button组件的示例。
添加PizzaSelection：
1[label src/app/app.component.ts]
2import { Component } from '@angular/core';
3
4@Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.css']
8})
9export class AppComponent {
10 pizzaSelection = ''
11}
然后添加p-accordion、p-accordionTab、p-RadiButton、p-panel、pButton：
1[label src/app/app.component.html]
2<p-accordion>
3 <p-accordionTab header="Salads">
4 Salads...
5 </p-accordionTab>
6 <p-accordionTab header="Pasta">
7 Pasta...
8 </p-accordionTab>
9 <p-accordionTab header="Pizza" [selected]="true">
10 <div>
11 <p-radioButton
12 label="Double cheese"
13 name="pizza"
14 value="double-cheese"
15 [(ngModel)]="pizzaSelection">
16 </p-radioButton>
17 </div>
18
19 <div>
20 <p-radioButton
21 label="Anchovy"
22 name="pizza"
23 value="anchovy"
24 [(ngModel)]="pizzaSelection">
25 </p-radioButton>
26 </div>
27
28 <div>
29 <p-radioButton
30 label="Meatlover's"
31 name="pizza"
32 value="meat-lover"
33 [(ngModel)]="pizzaSelection">
34 </p-radioButton>
35 </div>
36 </p-accordionTab>
37</p-accordion>
38
39<p-panel header="Extras" *ngIf="pizzaSelection && pizzaSelection.length">
40 Would you like extra cheese on your pizza?
41 <button pButton type="button" label="Ok, yeah!"></button>
42</p-panel>
请注意组件如何使用p-前缀。
将更改保存到文件并提供应用程序。
的屏幕快照
如果您选择了披萨，则会出现 Extras 面板，并提示用户添加额外的奶酪。
结论
在本文中，您将在一个角度4+项目中设置PrimeNG，并探索其中的一些主要组件。
要继续学习，请参考官方documentation]，获取所有可用组件的展示和文档。
使用Angular Material 2探索替代UI组件库。