ng-zorro-antd tag 组件 实现编辑状态、连续新增

• 先看效果
  
• 官网给的示例只有新增、删除，并且不可连续新增。自己制作实现这两个状态。最最要吐槽的是tag内的字体不能设置
  不知是不是我没找到，如果找到的同学请联系我：409223171@qq.com
• 下面直接贴代码了
• 模板中代码：

<span 
  *ngFor="let tag of tags;let i=index;">
  <nz-tag  *ngIf="tag.visible"
    [nzMode]="i === -1 ? 'default' : 'closeable'"
    (nzAfterClose)="handleClose(tag)"
    (click)="showInputInArray(tag)"
    (nzOnClose)="onCloseTagInArray()">
      <span style="font-size:1.2em;">{{ sliceTagName(tag.text) }}</span>
  </nz-tag>
  <input #inputElementInArray
    *ngIf="!tag.visible"
    type="text" nz-input nzSize='small' style="width:78px;"
    [(ngModel)]="tag.text"
    (blur)="handleInputConfirmInArray(tag)"
    (keydown.enter)="handleInputConfirmInArray(tag)">
</span>


<nz-tag
  *ngIf="!inputVisible"
  class="editable-tag"
  (click)="showInput()">
  <i nz-icon type="plus"></i>
  <span style="font-size:1.2em;">点我新增</span>
</nz-tag>

<input
  #inputElement
  nz-input
  nzSize="small"
  *ngIf="inputVisible" type="text"
  [(ngModel)]="inputValue"
  style="width: 78px;"
  (blur)="handleInputConfirm()"
  (keydown.enter)="handleInputConfirm()">

• 下面是CSS代码

.editable-tag ::ng-deep .ant-tag {
    background: rgb(255, 255, 255);
    border-style: dashed;
}

• 下面是ts代码

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: 'app-tag-edit',
  templateUrl: './tag-edit.component.html',
  styleUrls: ['./tag-edit.component.css']
})
export class TagEditComponent implements OnInit {

  private tag01:CcTag = new CcTag();
  private tag02:CcTag = new CcTag();
  private tag03:CcTag = new CcTag();
  private tags:CcTag[] = [];
  private skipClick:boolean = false;
  private newOngoing:boolean = true;
  
  inputVisible = false;
  inputValue = '';
  @ViewChild('inputElement') inputElement: ElementRef;
  @ViewChild('inputElementInArray') inputElementInArray: ElementRef;
  

  //#region 系统生命周期钩子
  constructor(
    private msg:NzMessageService
  ) { }

  ngOnInit() {
    this.initTags();
  }
  //#endregion

  //#region 初始化数据
  initTags(){
    this.tag01.text='单袋';
    this.tag01.value='单袋';
    this.tag01.visible=true;

    this.tag02.text='双袋';
    this.tag02.value='双袋';
    this.tag02.visible=true;

    this.tag03.text='编织袋';
    this.tag03.value='编织袋';
    this.tag03.visible=true;

    this.tags.push(this.tag01);
    this.tags.push(this.tag02);
    this.tags.push(this.tag03);
  }
  //#endregion

  handleClose(removedTag: {}): void {
    this.tags = this.tags.filter(tag => tag !== removedTag);
  }

  sliceTagName(tag: string): string {
    const isLongTag = tag.length > 20;
    return isLongTag ? `${tag.slice(0, 20)}...` : tag;
  }

  showInput(): void {
    this.inputVisible = true;
    setTimeout(() => {
      this.inputElement.nativeElement.focus();
    }, 10);
  }

  // 数组反应到UI上的input
  showInputInArray(tag:CcTag){
    if(this.skipClick){
      this.skipClick = false;
      return;
    }

    tag.visible=false;
    setTimeout(() => {
      this.inputElementInArray.nativeElement.focus();
    }, 10);
  }

  handleInputConfirmInArray(tag:CcTag){
    tag.visible=true;
  }

  handleInputConfirm(): void {
    var target:CcTag = new CcTag();
    target.text=this.inputValue;
    target.value=this.inputValue;
    target.visible=true;

    if (this.inputValue && this.tags.indexOf(target) === -1) {
      this.tags.push(target);
      this.inputValue='';
      this.showInput();
    }else{
      this.inputValue = '';
      this.inputVisible = false;
    }

  }

  onCloseTagInArray(){
    this.skipClick = true;
  }
}


export class CcTag{
  public text:string;
  public value:string;
  public visible:boolean;  
}