Angular2 roll-my-own下拉隱藏如果點擊？

我有一個div，我想要顯示/隱藏焦點/模糊input。下面是我想要一個簡化版本：Angular2 roll-my-own下拉隱藏如果點擊？

<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，但我需要保持下拉div的交互。

我可以讓ShowDropDown成爲一個數字，其中聚焦加1，鼠標懸停在div上增加了另一個1，模糊輸入減去1，並且將鼠標移出div減去1，但是我想可能會超出非常容易同步。

有沒有更簡單的方法來做到這一點？點擊後我可以強制模糊運行嗎？

來源

2016-02-04 Corey Ogburn

我找到了答案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>

這給我我想要的事件順序沒有做延遲或「引用計數」裏的鼠標或添加一個click事件在DOM一切。

來源

2016-02-05 16:06:32

更新

一個更好的辦法來聽的全球性事件是

@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

來源

2016-02-05 06:52:23

我能想到一個簡單的黑客攻擊這樣的

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

不是最完美的解決方案，但應該工作

來源

2016-02-05 08:17:38

我在li元素中的點擊事件根本沒有運行，或者我不需要工作。模糊首先發生，將ShowDropDown設置爲false，div被隱藏，點擊註冊在div後面的元素上。 –

Angular2 roll-my-own下拉隱藏如果點擊？

回答

相關問題