【发布时间】：2016-06-13 05:59:01
【问题描述】：
当用户单击该下拉列表之外的任何位置时，我想关闭我的登录菜单下拉列表，并且我想使用 Angular2 和 Angular2“方法”来做到这一点...
我已经实施了一个解决方案，但我真的对它没有信心。我认为必须有一个最简单的方法来达到相同的结果，所以如果你有任何想法......让我们讨论:)！
这是我的实现：
下拉组件：
这是我的下拉列表的组件：
- 每次将此组件设置为可见时，（例如：当用户单击按钮以显示它时）它都会订阅存储在 中的“全局”rxjs 主题 userMenu主题服务。
- 而且每次隐藏时，都会取消订阅该主题。
- 每次点击在该组件模板的任何地方都会触发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;
}
}
应用组件：
另一方面，还有应用程序组件（它是下拉组件的父级）：
- 该组件捕获每个点击事件并在同一个 rxjs 主题 (userMenu) 上发出
代码如下：
export class AppComponent {
constructor( public subjects: SubjectsService) {
document.addEventListener('click', () => this.onClick());
}
onClick( ) {
this.subjects.userMenu.next({});
}
}
困扰我的事情：
- 对于将全局 Subject 用作这些组件之间的连接器的想法，我感觉不太舒服。
-
setTimeout：这是必需的，因为如果用户单击显示下拉列表的按钮，否则会发生以下情况：
- 用户单击按钮（不是下拉组件的一部分）以显示下拉列表。
- 显示下拉菜单并立即订阅 userMenu 主题。
- 点击事件冒泡到应用组件并被捕获
- 应用程序组件在 userMenu 主题上发出一个事件
- 下拉组件在 userMenu 上捕获此操作并隐藏下拉列表。
- 最后从不显示下拉菜单。
这个设置的超时将订阅延迟到当前 JavaScript 代码轮的结束，这解决了问题，但在我看来是以一种非常优雅的方式。
如果您知道更清洁、更好、更智能、更快或更强大的解决方案，请告诉我:)！
【问题讨论】：
标签： javascript drop-down-menu angular rxjs