Question

考虑以下plunker

我有一个输入，当(focus)我希望有以下行为时，它会扩展为下拉列表

当输入被聚焦时，用户可以点击任何未输入的内容在dropdown或input，dropdown应该签订合同
当重点关注输入时，用户点击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()"

this

但现在当我点击input并点击input和input以外的任何地方时dropdown不合同

仅当我点击dropdown然后点击input时，其他任何地方都会dropdown合同

有人能给我一些见解吗？

由于

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;
    }
}

在angular2中的另一个元素`blur`之后无法“聚焦”

1 个答案: