Уволить мат-сиденав по клику снаружи - PullRequest
Новая
       25

Уволить мат-сиденав по клику снаружи

0 голосов
/ 05 июля 2018

Я пытаюсь закрыть боковую панель всякий раз, когда пользователь щелкает где-то не в ней. Я пробовал двустороннюю привязку данных, и теперь я пытаюсь с rxjs 'Subject

AppTemplate 

<app-sidenav [openedSubject]="openedSubject"></app-sidenav>

AppComponent 

openedSubject = new Subject<boolean>();

@HostListener('click', ['$event']) clickedInside($event) {
    this.openedSubject.next(false);
}

SidenavComponent 

@Input() openedSubject: Subject<boolean>;
@ViewChild('sidenav') sidenav: MatSidenav;

ngAfterContentInit() {
    this.openedSubject.subscribe(opened => {
        if(this.sidenav.opened) opened || this.sidenav.toggle();
    });
}

toggle() {
  this.openedSubject.next(!this.sidenav.opened);
}

SidenavTemplate 

<mat-sidenav-container>
    <mat-sidenav #sidenav><mat-toolbar color="primary">Menu</mat-toolbar>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button (click)="toggle()">toggle</button>
        </mat-toolbar>
    </mat-sidenav-content>
</mat-sidenav-container>

https://stackblitz.com/edit/ng-sidenav-experiments

Но, похоже, есть логическая ошибка. Событие click охватывает весь документ, тогда как оно должно исключать sidenav и панель инструментов.

1 Ответ

0 голосов
/ 05 июля 2018

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

<sidenav [openedSubject]="openedSubject"></sidenav>

<fake-route-view (click)="dismissSidebar()"></fake-route-view>

Полная рабочая версия: https://stackblitz.com/edit/ng-sidenav-experiments

...