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

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

  
      {{ sliceTagName(tag.text) }}
  
  




  
  点我新增

• 下面是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;  
}