[Angular2+/JavaScript]点击DIV变成可编辑文本，移开Input消失/原生写法/autofocus失效解决/Directive相关

point:

1、Angular2+的话可以直接在ts里面写，但是考虑到有很多个item，所以改为Directive，但是思路是一样的

2、关于Input自动focus的话是可以H5里写autofocus，但是它none->block之后再次渲染就失效了，我也是醉了，所以只能用定时器的方法在后天把它放到另一个线程了。

效果图：

未点击/或者bulr的时候

点击后：（可编辑的）

思路：其实是DIV和input在同一个位置，控制谁先消失和出现，由于需要双向绑定和监听事件会显得比较麻烦，

点击父DIV--》监听click->绑定focus，并且在父DIV的整个范围里再写一个监听，一旦input失焦，好的那么一切恢复原状

代码：

 <div class="fg-block" appConvertToInput>
      <div class="field-base">{{testValue}}</div>
      <div class="field-input" style="width: 90px;
      display: none;
      height: 15px;">
        <input type="text" (change)="test()" value="testValue" [(ngModel)]="testValue">
      </div>
    </div>

@HostListener('click', ['$event.target'])
  public onClick(targetElement) {
    const fieldInput = this.el.nativeElement.querySelector('.field-input');
    const fieldbase = this.el.nativeElement.querySelector('.field-base');
    const input = this.el.nativeElement.querySelector('input');
    setTimeout(() => {
      input.focus();
    }, 10);
    this.renderer.setStyle(fieldInput, 'display', 'block');
    this.renderer.setStyle(fieldbase, 'display', 'none');
    input.addEventListener('blur', (event) => {
      this.renderer.setStyle(fieldInput, 'display', 'none');
      this.renderer.setStyle(fieldbase, 'display', 'block');
    });

其实这里已经有点违反Angular少操作DOM的原则了，监听事件也偏向原生JS，思路其实蛮简单，如果是纯JS也可以实现

click是绑定在父DIV上的，父DIV里也可以取到当前元素的子元素，原生JS和Angular取DOM的方式不同，不多说了