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

Angular使实现几乎所有功能变得非常容易。在本文中，我们将学习如何在您的角度应用程序中实现添加标签功能。添加标签在音乐应用程序，在线购物应用程序等多个领域中都有应用程序。通过使用此功能，我们可以根据用户的需要过滤搜索结果。

方法：

• 角材料库提供了垫片，可用于实现此功能。
• 我们可以在表单字段中使用它来获取用户输入并更新我们的标签列表。
• 用户添加完标签后，我们可以保存标签列表。
• 现在我们有了标签列表，我们可以按需要使用它。

分步实施：

对于组件类：

• 从@ angular / material / chips导入MatChipInputEvent来处理标签输入事件。
• 从@ angular / cdk / keycodes导入COMMA， ENTER以添加分隔键。
• 创建一个列表，其中将包含用户输入的所有标签。
• 创建您的自定义添加和删除方法以添加和删除标签。
• 该组件的代码：

import {Component} from '@angular/core';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {MatChipInputEvent} from '@angular/material/chips';
  
@Component({
  selector: 'add-tags',
  templateUrl: 'tags.html',
  styleUrls: ['tags.css'],
})
export class addTags {
  
/*Set the values of these properties
    to use them in the HTML view.*/
  
  visible = true;
  selectable = true;
  removable = true;
    
/*set the separator keys.*/
  
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  
/*create the tags list.*/
  
  Tags: string[] = [];
    
/*our custom add method which will take
    matChipInputTokenEnd event as input.*/
  add(event: MatChipInputEvent): void {
  
/*we will store the input and value in local variables.*/
  
    const input = event.input;
    const value = event.value;
  
    if ((value || '').trim()) {
      
 /*the input string will be pushed to the tag list.*/
   
      this.Tags.push(value);
    }
  
    if (input) {
  
/*after storing the input we will clear the input field.*/
  
      input.value = '';
    }
  }
  
/*custom method to remove a tag.*/
  
  remove(tag: string): void {
    const index = this.Tags.indexOf(tag);
  
    if (index >= 0) 
    {
  
/*the tag of a particular index is removed from the tag list.*/
  
      this.Tags.splice(index, 1);
    }
  }
}

对于HTML视图：

• 创建一个表单字段，该字段将接受输入并显示标签列表。
• 有一些参数：
  1. matChipInputFor：它获取表单字段的ID，我们将从中获取标签的输入。
  2. matChipInputSeparatorKeyCodes：它获取将用作分隔符的键的值。
  3 .matChipInputTokenEnd：用户按下分隔键时，它将包含最后输入的标签，我们可以通过自定义添加方法更新标签列表。
• 要删除特定标签，请使用matChipRemove指令添加一个mat-icon。
• HTML视图的代码：

    
        
    
    
        
            
  
            
                
  
                
                    {{Tag}}
                    
  
                    cancel
                  
                
                
            
        
    

• 现在，在主要组件中包括此“添加标签”组件。

import {Component} from '@angular/core';
  
@Component({
  selector: 'app-root',
  template: `
  

  
  
  `,
  styleUrls: ['main.css'],
})
  
export class AppComponent {
  
}

• 我们已经成功实现了添加标签功能。

输出：表单字段上的Mat-chips代表用户输入的标签。