当用户单击下拉菜单之外的任何地方时,我想关闭我的登录菜单下拉菜单,我想使用Angular2和Angular2“方法”来完成此操作…
我已经实现了一个解决方案,但是我对此确实没有信心。我认为必须有一种最简单的方法来达到相同的结果,因此,如果您有任何想法…让我们讨论一下:)!
这是我的实现:
下拉组件:
这是我的下拉菜单的组成部分:
这是代码
export class UserMenuComponent { _isVisible: boolean = false; _subscriptions: Subscription<any> = null; constructor(public subjects: SubjectsService) { } onClick(event) { event.stopPropagation(); } set isVisible(v) { if( v ){ setTimeout( () => { this._subscriptions = this.subjects.userMenu.subscribe((e) => { this.isVisible = false; }) }, 0); } else { this._subscriptions.unsubscribe(); } this._isVisible = v; } get isVisible() { return this._isVisible; } }
应用程序组件:
另一方面,存在应用程序组件(它是下拉组件的父级):
这是代码:
export class AppComponent { constructor( public subjects: SubjectsService) { document.addEventListener('click', () => this.onClick()); } onClick( ) { this.subjects.userMenu.next({}); } }
什么困扰我:
这个设置的超时将订阅延迟到当前JavaScript代码回合的结尾,从而解决了问题,但是我认为这是一种非常优雅的方式。
如果您知道更清洁,更好,更智能,更快或更强大的解决方案,请告诉我:)!
您可以使用(document:click)事件:
(document:click)
@Component({ host: { '(document:click)': 'onClick($event)', }, }) class SomeComponent() { constructor(private _eref: ElementRef) { } onClick(event) { if (!this._eref.nativeElement.contains(event.target)) // or some similar check doSomething(); } }