介绍 Angular PrimeNG 标签组件

Angular PrimeNG 标签组件是一个开源的、专业的 UI 组件库，可以为使用 Angular 来构建 Web 应用程序的程序员提供高品质的、美观的界面元素。

标签组件是 Angular PrimeNG 组件库中其中一种常用的 UI 组件，包括支持单选、多选、显示提示信息等功能的标签。

特点

• 完全开源
• 丰富的 UI 组件
• 自适应各种设备
• 网络加载速度快
• 多语言支持

安装

在开始使用 Angular PrimeNG 标签组件之前，需要先安装 PrimeNG 及其依赖。

通过 npm 安装

可以使用 npm 来安装 PrimeNG：

npm install primeng --save

同时还需要安装依赖，包括：

npm install primeicons --save
npm install @angular/animations --save
npm install @angular/cdk --save
npm install @angular/common --save
npm install @angular/core --save
npm install @angular/forms --save
npm install @angular/platform-browser --save
npm install @angular/platform-browser-dynamic --save
npm install rxjs --save
npm install zone.js --save

在应用中导入 PrimeNG 模块

在应用中导入 PrimeNG 组件的模块，例如：

import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

具体的，如果需要使用标签组件，则需要导入 TagModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TagModule } from 'primeng/tag';

@NgModule({
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, TagModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用

在应用中使用 Angular PrimeNG 标签组件很简单，例如：

<p-tag value="Vue.js" class="p-mr-2"></p-tag>
<p-tag value="React" class="p-mr-2"></p-tag>
<p-tag value="Angular" class="p-mr-2"></p-tag>

以上代码会渲染出 3 个标签，每个标签的值分别为“Vue.js”、“React”和“Angular”。

此外，标签组件还支持绑定事件。例如，可以为 onRemove 事件绑定一个函数，用于在删除标签时触发：

<p-tag value="Vue.js" (onRemove)="removeTag($event)"></p-tag>

以上代码中，removeTag 函数接受一个参数 $event，表示触发的事件。在函数中可以通过 $event 来获取将要删除的标签的值等信息。

总结

Angular PrimeNG 标签组件是一个功能丰富的 UI 组件，提供了丰富的功能和事件绑定，适用于开发各种 Web 应用程序。

在使用 Angular PrimeNG 标签组件时，需要先安装 PrimeNG 及其依赖，并在应用中导入标签组件的模块，然后即可在应用中使用它。