Angular PrimeNG 按钮组件

PrimeNG 是一个 Angular UI 组件库，其中包含许多功能强大的组件，使 Angular 应用程序的 UI 设计更加容易。在 PrimeNG 中，按钮组件是其中很重要的一个，它提供了多种类型的按钮，包括带图标、标签、菜单等等，以及一些基本的样式设置，如颜色、尺寸等。

安装 PrimeNG

要使用 PrimeNG，首先需要安装 PrimeNG 的 npm 包。可以在命令行中输入以下命令来安装：

npm install primeng --save

此外，还需要为项目安装 PrimeNG 的依赖包 font-awesome 和 @angular/animations，请执行以下两个命令：

npm install font-awesome --save
npm install @angular/animations --save

导入 PrimeNG

安装了 PrimeNG 的 npm 包和依赖包后，需要在 Angular 项目中导入 PrimeNG。为此，请在 app.module.ts 文件中添加以下代码：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';

@NgModule({
  imports: [BrowserAnimationsModule, ButtonModule],
  exports: [ButtonModule]
})
export class YourAppModule { }

此代码导入了 ButtonModule，并将其添加到 YourAppModule 模块中。

使用 PrimeNG 按钮

安装了 PrimeNG 的 npm 包和依赖包，并导入了 ButtonModule 后，就可以在应用程序中使用 PrimeNG 的按钮组件了。以下是几种常见的按钮类型：

带图标的按钮

带图标的按钮在 UI 上更加动态，常常用于触发操作。代码片段如下：

<button pButton icon="pi pi-user" label="Login"></button>
<button pButton icon="pi pi-check" label="Submit"></button>

其中，pButton 表示 ButtonModule 中的按钮组件，icon 属性表示使用的图标，label 属性表示按钮上的文字。

标签按钮

标签按钮用于标记或显示一个特定的信息或状态，常常用于筛选或排序功能。代码片段如下：

<button pButton label="New"></button>
<button pButton label="Save"></button>

其中，label 属性表示按钮中显示的标签。

带下拉菜单的按钮

带下拉菜单的按钮常常用于显示更多选项或操作，点击下拉箭头将显示菜单选项。代码片段如下：

<p-dropdown [options]="cities" placeholder="Select"></p-dropdown>

其中，p-dropdown 表示 DropdownModule 中的下拉菜单组件，options 属性表示菜单选项，placeholder 属性表示下拉箭头旁的提示语。

更多 PrimeNG 按钮类型及使用方法，请参考 PrimeNG 官方文档。