Angular material mat-sidenav-content 点击事件问题

Question

当我在 mat-sidenav-content 上放置 click 事件时 <mat-sidenav-content (click)="isNavBarOpened=false"> 里面的mat-slide-toggle不行。

这是example

Answer 1

监听更改事件并相应地切换您的布尔值。

https://stackblitz.com/edit/angular-cvlqrt-qjc44x

Answer 2

在你的 mat-slide 切换组件上添加 $event.stopPropagation() 这样事件就不会冒泡了。

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

Forked Example

Answer 3

将 set 属性 value 部分移动到一个函数为我解决了这个问题。这样，我们就不需要触及事件传播顺序。

我的猜测是转向功能会增加额外的 CPU 周期，延迟会解决问题。但这只是猜测，有待专家解释。

<mat-sidenav-content (click)="closeNavBar()">

closeNavBar() {
this.isNavBarOpened=false;
}

Forked Example