Угловой 2+ "нажмите снаружи" из 2 компонентов, а не только 1

Question

У меня есть многокомпонентный переключатель боковой панели, приложение / кнопка / боковая панель находятся в своих собственных компонентах, кнопка / боковая панель являются дочерними элементами приложения (или, по крайней мере, загружены в компонент приложения, предположим, что это дочерние элементы)

Все еще не совсем в курсе межкомпонентной связи Angular, в этом случае я использую службу.

Что мне нужно: если ни один из компонентов , кнопка или боковая панель не нажата (что-либо вне этих двух компонентов) ... свернуть боковую панель.

В настоящее время я переключаю логическое состояние на «видимую» переменную в сервисе, чтобы развернуть / свернуть навигацию.

Я испробовал все методы с небольшим успехом. Как можно это сделать? Или, по крайней мере, где-нибудь, что я могу прочитать, чтобы подобраться и взять оттуда?

Код: https://stackblitz.com/edit/multi-component-communication

Answer 1

Ваш текущий код работает, если обработчик события document:click переключает флаг visible:

@HostListener("document:click", ["$event"])
onClick(event) {
  this.visible = this._ref.nativeElement.contains(event.target);
}

Чтобы запретить нажатию кнопки достичь уровня документа, остановите распространение события:

<toggle-sidebar (click)="$event.stopPropagation()"></toggle-sidebar>

См. этот стек для демонстрации.

Answer 2

Вы можете обрабатывать clickOutSide как на боковой панели, так и на кнопке. И если оба щелкают снаружи, закройте боковую панель. Вы можете добиться того же самого с помощью @ Output / EventEmitter в обоих дочерних компонентах и ​​прослушивать их в файле app.component.ts.

Итак, подведем итог:

1. Отметьте clickOutSide на боковой панели и отправьте то же самое родительскому элементу, т.е. app.component.ts
2. Отметьте clickOutSide в кнопке переключения и отправьте то же самое родительскому элементу, т.е. app.component.ts
3. В app.component.ts обработать вышеперечисленные сигналы и выполнить проверки:
   • Когда кнопка переключения нажимается снаружи, sidenav нажимается снаружи, и sidenav открыт, мы должны закрыть sidenav.
   • Когда кнопка переключения нажата внутри, функционально, sidenav будет нажата снаружи. Но мы должны изменить sidenav, чтобы щелкнуть внутри. Итак, мы вручную изменим этот флаг. В противном случае, если вы нажмете в sidenav, но за пределами кнопки переключения, sidenav будет закрыт.

Я отредактировал ваш стек здесь , учитывая вышеописанные сценарии.

Answer 3

Вы должны использовать директиву для прослушивания щелчка на внешней панели:

import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    @Output() clickOutside: EventEmitter<Event> = new EventEmitter<Event>();

    constructor(private elementRef: ElementRef) { }

    @HostListener('document:mousedown', ['$event'])
    onDocumentClick(event: Event) {
        if (!this.isClickInElement(event)) {
            this.clickOutside.emit(event);
        }
    }

    private isClickInElement(event: Event): boolean {
        return this.elementRef.nativeElement.contains(event.target);
    }
}

Теперь, когда у вас есть меню, присоедините эту директиву, свяжите ее с выводом и вызовите метод, чтобы свернуть боковую панель или выполнить свое действие. Пример:

<ol (clickOutside)="collapseSideBar()">