Question

我想要div显示/隐藏input的焦点/模糊。这是我尝试的简化版本：

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

此div包含要点击的元素列表。我的问题是在input的点击之前发生了li的模糊。

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

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

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

Answer 1

我在this question中找到了答案：mousedown将在模糊之前发生，但点击将在之后发生。我只是改为

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

这为我提供了我想要的事件顺序而没有延迟或＃34;引用计数＆＃34;鼠标所在的位置或向DOM中的其他所有内容添加click事件。

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 (click)="...; ShowDropDown = true">...</li>
     <li (click)="...; ShowDropDown = true">...</li>
     <li (click)="...; ShowDropDown = true">...</li>
   </ul>
 </div>

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

如果点击，Angular2滚动我自己的下拉隐藏？

3 个答案: