Schließen auf Klick außerhalb Angular 2 (4)

Question

vor kurzem habe ich ähnliche Frage gestellt, aber ich konnte es nicht funktionieren, also werde ich es hier verweisen und um Hilfe bitten, da ich es nicht geschafft habe.

Frage: Hide on click Outside of element angular 4

Also, ich brauche folgendes zu tun: Ich habe eine Seite im Menü haben und auf Klick auf ein Listenelement in diesem Menü öffnen ich ein anderes Sidebar-Menü (es ist nicht ein Drop-Down), und ich Sie müssen es schließen, wenn Sie irgendwo klicken, aber auf das neue Seitenmenü.

Meine Komponentenstruktur ist die folgende: Layoutkomponente> Seitenleistenkomponente> Kleine Menükomponente.

Also öffne ich kleines Menü auf klicken Sie innerhalb Sidebar Komponente. Ich habe versucht: https://www.npmjs.com/package/angular2-click-outside

https://www.npmjs.com/package/ng2-click-outside

Sie nicht zu funktionieren scheint.

Danke.

Answer 1

Also habe ich mich eigentlich damit beschäftigt, aber nur mit einem einzigen Dropdown, aber ich denke, es wäre ähnlich wie Sie suchen.

In Ihrer Komponente/directive

constructor() { 
    document.addEventListener('click', this.offClickHandler.bind(this)); 
} 

offClickHandler(event:any) { 
    if (!event.target.closest(".select-options") && !event.target.closest(".select-input")) { 
     // do whatever you want here 
    } 
} 

Dies wird überprüfen, um zu sehen, ob es ein Klick nah war im div/Drop-Down, aber nicht, das offen ist. Dann würde der Code innerhalb von offClickHandler ausgeführt werden. Legen Sie also einfach die Klassen im OffClickHandler als Seitenmenü fest, das Sie beim Klicken wegklicken möchten, und blenden Sie es in der if -Anweisung aus.