javascript - 在 angular2 中的另一个元素的 `focus` 之后不能为 `blur`

Question

考虑以下 plunker

当 (focus) 我想要以下行为时，我有一个将扩展到下拉列表中的输入

1. 当输入聚焦时，用户点击任何不聚焦的地方 在 dropdown 或 input 中，dropdown 应该收缩
2. 当输入获得焦点时，用户点击 dropdown，dropdown 应该保持展开状态

现在，当用户点击输入并点击下拉菜单时，下拉菜单会收缩。

这是我的引用代码

@Component({
  selector: 'my-app',
  template: `
      <div class="wrapper">
        <input [(ngModel)]="searchText" 
               tabindex="0"
               placeholder="name" 
               (focus)="inputShow()"
               (blur)="inputHide()" 
               >
        <div class="option-wrapper" 
             [hidden]="isHideList()" 
             tabindex="0" 
             (focus)="inputShow()" 
             (blur)="inputHide()">
          <li class="options" 
              *ngFor="#option of optionlist">
            <div >{{option['name']}}</div>
          </li>
        </div>
      </div>
    `
})
export class App {

    optionlist = [{'name': '1'}, {'name': '2'}]

    inputShow() {
      this.inputFocus = true;
    }
    inputHide(){
      this.inputFocus= false;
    }

    isHideList() {
        return !this.inputFocus;
    }
}

接近预期行为的一种方法是带走

(blur)="inputHide()"

在 input 上，例如 this

但现在当我点击 input 并点击 input 和 dropdown 之外的任何地方时，dropdown 不会收缩

只有当我点击input然后点击dropdown然后其他地方才会dropdown contract

有人可以给我一些见解吗？

谢谢

Answer 1

Plunker example

监听窗口点击事件，仅当 event.target 位于包装器之外时才隐藏下拉列表:

@Component({
  selector: 'my-app',
  template: `
      <div #wrapper class="wrapper">
        <input #input [(ngModel)]="searchText" 
               tabindex="0"
               placeholder="name" 
               (focus)="inputShow()"
               > 
        <div class="option-wrapper" 
             [hidden]="isHideList()" 
             tabindex="0" 
             (focus)="inputShow()" 
             > 
          <li class="options" 
              *ngFor="#option of optionlist">
            <div >{{option['name']}}</div>
          </li>
        </div>
      </div>
    `
})
export class App {
    @ViewChild('wrapper') wrapper:ElementRef;
    @ViewChild('input') input:ElementRef;


    @HostListener('window:click', ['$event'])
    clickHandler(event) {

      var parent = event.target;
      while(parent != this.wrapper.nativeElement && parent != document) {
        parent = parent.parentNode;
      }
      if(parent == document) {
        this.inputHide();
      }
    }

    optionlist = [{'name': '1'}, {'name': '2'}]

    inputShow() {
      this.inputFocus = true;
    }
    inputHide(){
      this.inputFocus= false;
    }

    isHideList() {
        return !this.inputFocus;
    }
}