Angular 材质 mat-sidenav-content 点击事件问题答案

【问题标题】：Angular material mat-sidenav-content click event issueAngular 材质 mat-sidenav-content 点击事件问题
【发布时间】：2020-08-05 11:47:55
【问题描述】：

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

这里是example

【问题讨论】：

你想要达到的目标
我希望在 mat-sidenav 之外的每次点击都会关闭 disenav，所以我将点击事件放在 mat-sidenav-content 上，在 mat-sidenav-content 深处的某个地方我有 mat-slide-切换（与 sidenav 无关）并且它不起作用

【解决方案1】：

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

【讨论】：

我不想通过切换关闭它，我只想在任何地方单击导航内容将关闭导航栏，在我的真实应用程序中，我在里面的某个地方有 mat-slide-toggle应用程序（根本与侧导航无关）并且它不工作
知道了，在这种情况下使用 Cehllappan 提供的答案。提问时考虑更具体一些，祝你好运！

【解决方案2】：

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

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

【讨论】：

谢谢，它正在工作，所以我需要为应用程序中的每个元素都这样做吗？我希望 mat-sidenav 之外的每次点击都会关闭 disenav，所以我将点击事件放在 mat-sidenav-content 上，也许有一些不同的（优雅的）解决方案？
冒泡正在发生，因为您在 mat-drawer-content 中投射了 mat-slide-toggle 内容，并且在父组件中有点击事件，这就是为什么子元素点击会冒泡的原因。如果你在 mat-drawer 中有多个 mat-slide-toggle，你可以创建自定义指令来做同样的事情。

【解决方案3】：

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

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

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

closeNavBar() {
this.isNavBarOpened=false;
}

【讨论】：