最佳答案
如何关闭外部单击的下拉列表？
我想关闭我的登录菜单下拉列表当用户点击任何地方以外的下拉列表，我想这样做与 Angular2和 Angular2“方法”..。
我已经实现了一个解决方案，但我对它真的没有信心。我认为必须有一个最简单的方法来达到同样的结果，所以如果你有任何想法... 让我们讨论:) ！
以下是我的实施方案:
下拉组件:
这是我的下拉列表的组件:
- 每次这个组件设置为可见时(例如: 当用户点击一个按钮来显示它时) ，它订阅存储在 科目服务中的“ global”rxjs subject 用户菜单。
- 每次它被隐藏起来，它就会取消对这个主题的订阅。
- 每次单击 内心的任何位置，该组件的模板都会触发 OnClick ()方法，该方法只是停止事件冒泡到顶部(以及应用程序组件)
这是密码
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;
}
}
应用程序组件:
另一方面，还有应用程序组件(它是下拉组件的父组件) :
- 该组件捕获每个 click 事件并在相同的 rxjs Subject (用户菜单)上发出
密码如下:
export class AppComponent {
constructor( public subjects: SubjectsService) {
document.addEventListener('click', () => this.onClick());
}
onClick( ) {
this.subjects.userMenu.next({});
}
}
让我烦恼的是:
- 我对使用一个全局 Subject 作为这些组件之间的连接器的想法感到非常不舒服。
- SetTimeout: 这是必需的，因为如果用户点击显示下拉菜单的按钮，下面就会发生以下情况:
- 用户点击按钮(它不是下拉组件的一部分)来显示下拉菜单。
- 将显示下拉列表和 它立即订阅用户菜单主题。
- 单击事件冒泡到应用程序组件并被捕获
- 应用程序组件在 用户菜单主题上发出一个事件
- 下拉组件在 用户菜单上捕捉这个动作并隐藏下拉。
- 最后，下拉列表从不显示。
这个设置超时延迟订阅到当前的 JavaScript 代码结束，这解决了问题，但在我看来是以一种非常优雅的方式。
如果你知道更清洁，更好，更聪明，更快或更强的解决方案，请让我知道:) ！
