在外部点击时关闭 mat-sidenav

Posted 2023-02-18

【中文标题】在外部点击时关闭 mat-sidenav

【英文标题】：Dismiss mat-sidenav on click outside

【发布时间】：2018-12-13 11:59:29

【问题描述】：

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

应用模板

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

应用组件

openedSubject = new Subject<boolean>();

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

侧视图组件

@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 event 覆盖整个文档，而它应该排除 sidenav 和工具栏。

【问题讨论】：

您的 stackblitz 在您的问题中没有任何代码。它也从不显示 hello 组件。请用相关代码提出一个问题。

我认为最好显示一小段代码，而不是包含大量依赖项的大版本，例如 [WiP]：stackblitz.com/edit/ng-sidenav-experiments

这不适用于 AsyncSubject。为什么不使用常规主题？

@JBNizet 好的，我已经更新了文本并添加了一个新的 stackblitz。它现在应该具有足够的代表性。

【参考方案1】：

搞定了。问题是我使用了HostListener，而我真的只想像这样(click)：

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

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

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