3

每当用户单击不在其中的某个位置时，我都会尝试关闭侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用rxjs'Subject

应用模板

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

应用组件

openedSubject = new Subject<boolean>();

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

Sidenav组件

@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);
}

Sidenav模板

<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 和工具栏。

4

1 回答 1

0

得到它的工作。问题是我对 的使用HostListener，而我真的只是想(click)这样：

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

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

完整工作版：https ://stackblitz.com/edit/ng-sidenav-experiments

于 2018-07-05T14:41:59.930 回答