Я хотел бы закрыть раскрывающееся меню входа в систему, когда пользователь щелкает где-нибудь за пределами этого раскрывающегося списка, и я хотел бы сделать это с помощью Angular2 и с "подходом" Angular2 ...
Я реализовал решение, но я действительно не уверен в нем. Я думаю, что должен быть самый простой способ добиться того же результата, так что если у вас есть идеи ... давайте обсудим :)!
Вот моя реализация:
Выпадающий компонент:
Это компонент моего раскрывающегося списка:
- Каждый раз , когда этот компонент он установлен в видимой (Например: когда пользователь нажимает на кнопку , чтобы отобразить его) это подписаться на «глобальный» rxjs предмет UserMenu хранится в SubjectsService .
- И каждый раз, когда его прячут, он отписывается в этой теме.
- Каждый щелчок в любом месте в пределах шаблона этого компонента триггера 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({});
}
}
Что меня беспокоит:
- Мне не очень нравится идея иметь глобальный субъект, который действует как связующее звено между этими компонентами.
- SetTimeout : Это необходимо , потому что здесь это то , что произойдет в противном случае , если пользователь нажимает на кнопку , которая показывает выпадающее меню:
- Пользователь нажимает кнопку (которая не является частью раскрывающегося списка), чтобы отобразить раскрывающийся список.
- Отображается раскрывающийся список, и он сразу же подписывается на тему userMenu .
- Пузырь события клика поднимается до компонента приложения и ловится
- Компонент приложения генерирует событие для темы userMenu
- Компонент раскрывающегося списка улавливает это действие в userMenu и скрывает раскрывающийся список.
- В конце раскрывающийся список никогда не отображается.
Этот установленный тайм-аут задерживает подписку до конца текущей очереди кода JavaScript, что решает проблему, но, на мой взгляд, очень элегантно.
Если вы знаете более чистые, лучшие, умные, быстрые или сильные решения, дайте мне знать :)!