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

Posted 2023-02-18

【中文标题】Angular 材质 mat-sidenav-content 点击事件问题

【英文标题】：Angular material mat-sidenav-content click event issue

【发布时间】：2020-08-05 11:47:55

【问题描述】：

当我将 click 事件放在 ma​​t-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】：

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

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

【讨论】：

我不想通过切换关闭它，我只想在任何地方单击导航内容将关闭导航栏，在我的真实应用程序中，我在里面的某个地方有 mat-slide-toggle应用程序（根本与侧导航无关）并且它不工作

知道了，在这种情况下使用 Cehllappan 提供的答案。提问时考虑更具体一些，祝你好运！

【参考方案2】：

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

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

Forked Example

【讨论】：

谢谢，它正在工作，所以我需要为应用程序中的每个元素都这样做吗？我希望 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;

Forked Example