Angular 实现输入框中显示文章标签的实例代码

<div>
 <span *ngFor="let tag of tags">{{tag}}</span>
 <input type="text">
</div>

<div (click)="focusTagInput()">
 <span *ngFor="let tag of tags">{{tag}}</span>
 <input #tagInput type="text">
</div>

export class EditorComponent {
 // 用 @ViewChild 获得 DOM 元素
 @ViewChild('tagInput') tagInputRef: ElementRef;

 focusTagInput(): void {
  // 让 input 元素获得焦点
  this.tagInputRef.nativeElement.focus();
 }
}

<input #tagInput type="text" (keyup)="onKeyup($event)">

onKeyup(event: KeyboardEvent): void {
 // 这里将标签输入框作为 FormGroup 中的一个 control
 const inputValue: string = this.form.controls.tag.value;

 // 检查键盘是否按下了逗号或者空格, 而且得要求
 if (event.code === 'Comma' || event.code === 'Space') {
  this.addTag(inputValue);
  // 将新输入的标签加入标签列表后, 把输入框清空
  this.form.controls.tag.setValue('');
 }
}

addTag(tag: string): void {
 // 去掉末尾的逗号或者空格
 if (tag[tag.length - 1] === ',' || tag[tag.length - 1] === ' ') {
  tag = tag.slice(0, -1);
 }
 // 有可能什么也没输入就直接按了逗号或者空格, 如果已经在列表中, 也不添加
 // 这里使用了 lodah 的 find
 if (tag.length > 0 && !find(this.tags, tag)) {
  this.tags.push(tag);
 }
}

<div (click)="focusTagInput()">
 <span *ngFor="let tag of tags">
  {{tag}}
 <span (click)="removeTag(tag)">×</span>
 </span>
 <input #tagInput type="text" (keyup)="onKeyup($event)">
</div>
removeTag(tag: string): void {
 this.tags.splice(-1);
}

onKeyUp(event: KeyboardEvent): void {
 const inputValue: string = this.form.controls.tag.value;
 // 按下退格键, 且输入框是空的时候, 删除最后一个标签
 if (event.code === 'Backspace' && !inputValue) {
  this.removeTag();
  return;
 } else {
  if (event.code === 'Comma' || event.code === 'Space') {
   this.addTag(inputValue);
   this.form.controls.tag.setValue('');
  }
 }
}

// 修改参数为可选参数, 当没有参数时, 删除列表中最后一个,
// 有参数时, 删除传入的标签
removeTag(tag?: string): void {
 if (!!tag) {
  // 这里使用了 lodash 的 pull
  pull(this.tags, tag);
 } else {
  this.tags.splice(-1);
 }
}