角度材料垫侧导航内容点击事件问题

Question

当我将click事件放在mat sidenav内容<mat-sidenav-content (click)="isNavBarOpened=false">上时内部的mat-slide-toggle不工作。

以下是的示例

Answer 1

在垫子滑动切换组件上添加$event.stopPropagation((，这样事件就不会冒泡。

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

分叉示例

Answer 2

收听更改事件并相应地切换布尔值。

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

Answer 3

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

我的猜测是，转移到功能是增加额外的CPU周期，而这种延迟正在解决问题。但这只是一个猜测，有待专家们的解释。

<mat-sidenav-content (click)="closeNavBar()">
closeNavBar() {
this.isNavBarOpened=false;
}

分叉示例