Angular2 roll-my-own-Drop-down ausblenden, wenn Sie wegklicken?

Question

Ich habe eine div, die ich auf Fokus/Unschärfe eines input zeigen/ausblenden möchte. Hier ist eine vereinfachte Version von dem, was ich versuche:

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

Diese div enthält eine Liste von Elementen zu klicken. Mein Problem ist, dass die input 's Blur vor dem li Klick passiert.

Ich möchte die Dinge einfach halten. Ich möchte nicht alles Fokus oder Click-Ereignis setzen, um ShowDropDown=false einzustellen, aber ich muss die Dropdown-div offen für die Interaktion halten.

Ich könnte ShowDropDown eine Zahl sein, wo Fokussierung fügt 1 hinzu, mousing über das Div fügt eine weitere 1 hinzu, verwischt den Eingang subtrahiert 1, und mausern aus dem Div subtrahiert 1, aber ich stelle mir vor, dass könnte ausgehen sehr einfach synchronisieren.

Gibt es einen einfacheren Weg, dies zu tun? Kann ich die Unschärfe zum Ausführen nach dem Klick erzwingen?

Answer 1

ich die Antwort gefunden in this question: mousedown wird vor dem Weichzeichnen passieren, aber danach wird geklickt. Ich wechsle einfach zu

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

Das bin ich die Reihenfolge der Ereignisse gibt, gebe ich will, ohne Verzögerungen oder „Referenzzählung“ zu tun, wo die Maus ist oder ein Click-Ereignis für alles andere in der DOM-Zugabe.

Answer 2

aktualisieren

Eine bessere Möglichkeit zur globalen Ereignisse zu hören ist

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

Original-

einfach überprüfen, ob der Klick innerhalb oder außerhalb Ihres Dropdown war:

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

Ich kann das derzeit nicht in TS arbeiten, obwohl DOM immer undefiniert ist.
Dies funktioniert gut in Dart.
Plunker

Ich habe ein Problem https://github.com/angular/angular/issues/6904

Answer 3

ich einen einfachen Hack denken kann, wie diese

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

nicht die eleganteste Lösung, soll aber funktionieren