Angular2如果单击离开，是否可以滚动我自己的下拉隐藏？

Question

我有一个div，我想在输入的聚焦/模糊上显示/隐藏它。以下是我尝试的简化版本：

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
  </ul>
</div>

此div包含要单击的元素列表。我的问题是，输入的模糊在li单击之前发生。

我想让事情保持简单。我不想设置所有内容的焦点，也不想单击事件来设置ShowDropDown=false，但我需要保持下拉div打开以进行交互。

我可以让ShowDropDown成为一个数字，其中聚焦加1，在div上移动鼠标再加1，模糊输入减去1，在div上移动鼠标减去1，但我认为这很容易失去同步。

有没有更简单的方法？单击后可以强制运行模糊吗？




Answer 1

我能想到这样一个简单的黑客

 <input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
 <div *ngIf="ShowDropDown">
   <ul>
     <li (click)="...; ShowDropDown = true">...</li>
     <li (click)="...; ShowDropDown = true">...</li>
     <li (click)="...; ShowDropDown = true">...</li>
   </ul>
 </div>

不是最优雅的解决方案，但应该有效

Answer 2

使现代化

听全球事件的更好方法是

@Comonent({...
  host: {'(window:click)': 'clickHandler()'}
})

起初的

只要检查点击是在你的下拉列表里面还是外面：

import {DOM} from angular2/platform/common_dom;

constructor(private elementRef: ElementRef) {
  DOM.getGlobalEventTarget('window')
     .addEventListener('click', (event) => {
       // check if event.target is a child of elementRef.nativeElement
       // if not hide the dialog
     });
}

我目前无法在TS中执行此操作，尽管DOM始终未定义。
这在Dart中工作正常。
Plunker

我制造了一个问题https://github.com/angular/angular/issues/6904

Answer 3

我在这个问题中找到了答案：鼠标下移将发生在模糊之前，而单击将发生在模糊之后。我只是换成

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>

这为我提供了所需的事件顺序，而无需在鼠标所在的位置进行延迟或“引用计数”，也无需向DOM中的所有其他内容添加单击事件。