如何在 Angular 9 应用程序中实现 “添加标签” 功能？

在现代 Web 应用程序中，标签是一种非常普遍的元素。许多用户需要为他们创建的内容添加标签或者分类，从而方便快速检索到它们。Angular 9 是一个非常流行的 Web 开发框架，它提供了非常便捷的方案来帮助我们实现“添加标签”的功能。

添加标签的常见实现方式

在我们开始具体讲解如何在 Angular 9 应用程序中实现“添加标签”的功能之前，我们先来了解一下添加标签的常见实现方式：

• 使用 input 标签
• 使用 select 标签 + 多选模式
• 使用外部组件库或者 UI 库

对于 Angular 应用程序来说，最好的方式就是使用一个外部组件库或者 UI 库，这样可以避免很多自己实现的烦恼。

添加标签的实现步骤

假设我们现在要在 Angular 9 应用程序中实现一个添加标签的功能。在这个功能中，我们需要有一个输入框和一个添加按钮，用户在输入框中输入标签名，然后点击添加按钮，系统就会将该标签名添加到标签列表中。

步骤一：创建标签列表组件

首先，我们需要在 Angular 应用程序中创建一个标签列表组件，用于显示已经添加的标签列表。在该组件中，我们需要添加一个标签数据数组，作为该组件的控制属性：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tag-list',
  template: `
    <div class="tag-list">
      <div class="tag" *ngFor="let tag of tags">{{ tag }}</div>
    </div>
  `,
  styles: [`
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .tag {
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 6px 12px;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #666;
    }
  `]
})
export class TagListComponent {
  tags: string[] = ['Angular', 'JavaScript', 'TypeScript'];
}

步骤二：创建标签输入组件

我们还需要在 Angular 应用程序中创建一个标签输入组件，用于让用户输入标签名。在该组件中，我们需要添加一个输入框和添加按钮，并添加一个能够触发添加标签事件的回调函数：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tag-input',
  template: `
    <div class="tag-input">
      <input type="text" [(ngModel)]="tagName" placeholder="输入标签名" />
      <button (click)="addTag()">添加</button>
    </div>
  `,
  styles: [`
    .tag-input {
      display: flex;
      margin-bottom: 10px;
    }
    .tag-input input {
      flex-grow: 1;
      margin-right: 10px;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
    }
    .tag-input button {
      padding: 6px 12px;
      background-color: #007fff;
      border: 1px solid #007fff;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }
  `]
})
export class TagInputComponent {
  tagName = '';

  addTag() {
    if (this.tagName.trim()) {
      // 在这里调用添加标签的回调函数
    }
    this.tagName = '';
  }
}

步骤三：将两个组件集成到页面上

最后，我们需要将两个组件集成到同一个页面中。在一个 HTML 页面中，我们可以使用以下代码来添加标签输入组件和标签列表组件：

<div class="tag-manager">
  <app-tag-input (addTag)="tags.push($event)"></app-tag-input>
  <app-tag-list [tags]="tags"></app-tag-list>
</div>

其中，“(addTag)="tags.push($event)"”这个语句表示当添加标签事件触发时，将该事件携带的标签名添加到标签列表中。

结论

在本文中，我们介绍了如何在 Angular 9 应用程序中实现一个简单的“添加标签”的功能。通过以上步骤，我们可以很容易地实现这个功能，使得我们的用户可以方便地为其创建的内容添加标签，从而更加方便地查找和管理它们。