Я хотел бы закрыть раскрывающееся меню входа в систему, когда пользователь щелкнет где-нибудь за пределами этого раскрывающегося списка, и я хотел бы сделать это с помощью Angular2 и с помощью Angular2 "...
Я реализовал решение, но я действительно не уверен в этом. Я думаю, что должен быть самый простой способ добиться того же результата, поэтому, если у вас есть какие-то идеи... пусть обсуждают:)!
Вот моя реализация:
Выпадающий компонент:
Это компонент для моего раскрывающегося списка:
- Каждый раз, когда этот компонент устанавливается на видимый (например: когда пользователь нажимает на кнопку для его отображения), он подписывается на "глобальный" пользовательский пользовательский интерфейс rxjs, сохраненный в рамках 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;
}
}
Компонент приложения:
С другой стороны, есть компонент приложения (который является родителем компонента выпадающего списка):
- Этот компонент улавливает каждое событие click и испускает тот же объект rxjs Subject (userMenu)
Вот код:
export class AppComponent {
constructor( public subjects: SubjectsService) {
document.addEventListener('click', () => this.onClick());
}
onClick( ) {
this.subjects.userMenu.next({});
}
}
Что меня беспокоит:
- Мне не очень нравится идея создания глобального объекта, который выступает в качестве соединителя между этими компонентами.
- setTimeout: это необходимо, потому что вот что происходит иначе, если пользователь нажимает кнопку, показывающую выпадающий список:
- Пользователь нажимает кнопку (которая не входит в компонент раскрывающегося списка), чтобы отобразить раскрывающееся меню.
- Отображается выпадающий список и немедленно подписывается на тему userMenu.
- Вызов пузырька события до компонента приложения и попадается
- Компонент приложения испускает событие в теме userMenu
- Выпадающий компонент поймает это действие на userMenu и скроет раскрывающееся меню.
- В конце раскрывающийся список никогда не отображается.
Этот заданный тайм-аут задерживает подписку до конца текущего кода JavaScript-кода, который решает проблему, но очень изящным способом, на мой взгляд.
Если вы знаете более чистые, лучшие, умные, быстрые или сильные решения, сообщите мне:!
