Автоматическое скрытие боковой панели при нажатии за ее пределами - PullRequest
Новая
       9

Автоматическое скрытие боковой панели при нажатии за ее пределами

0 голосов
/ 27 февраля 2020

Я использовал приведенную ниже ссылку для создания боковой панели с использованием angular анимации, и она отлично работает. https://stackblitz.com/edit/angular-sidebar-animation?file=src%2Findex.html

Но я хочу добавить функциональность, чтобы закрыть боковую панель, когда пользователь нажимает за пределами боковой панели.

Ответы [ 3 ]

0 голосов
/ 27 февраля 2020

Вы можете обратиться к следующему сообщению для получения решения в jquery как сделать-я-обнаружить-щелкнуть-вне-элемента

, если вы не хотите чтобы использовать jquery, основываясь на приведенном выше посте, вы можете немного изменить свой код.

app.component. html

<button (click)="toggleMenu($event)" class="hamburger">
 <span>toggle menu</span>
</button>
<h1>{{name}} Sidebar</h1>

<app-menu [@slideInOut]="menuState" ></app-menu>

AppComponent Класс app.component.ts file 

export class AppComponent {
 name = "Angular";
 ngOnInit() {
  window.addEventListener("click", () => {
  this.menuState = this.menuState === 'in' ? 'out' : 'out';
 });
}
menuState: string = "out";

toggleMenu(event) {
 event.stopPropagation();
 this.menuState = this.menuState === 'out' ? 'in' : 'out';
}
}

Это должно сработать.

0 голосов
/ 27 февраля 2020

Пожалуйста, посмотрите на этот stackblitz Я добавил директиву ClickOutsideDirective, которая проверяет, есть ли в меню clik 

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

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef : ElementRef) {

    }

    @Output()
    public clickOutside = new EventEmitter();

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {

        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(null);
        }
    }
}
0 голосов
/ 27 февраля 2020

Обычно боковая панель или выдвижной ящик используются в качестве панели, обычно накладываемой поверх страницы и скользящей по боковой поверхности. Пользователь может взаимодействовать с боковой панелью или ящиком, не покидая текущей страницы.

В вашем случае, хотя он почти работает, все же требуется еще немного вещей. См. Ниже компонент 'ant' angular, чтобы узнать о таких функциях, которые решают все ваши проблемы, и он с открытым исходным кодом.

Ant Drawer: https://ng.ant.design/components/drawer/en

...