角材料mat-sidenav-content点击事件问题

时间:2020-04-22 12:42:29

标签: angular angular-material mat-sidenav mat-slider

当我在{strong> mat-sidenav-content dependencies { // Remove dev-tools from classpath // developmentOnly("org.springframework.boot:spring-boot-devtools") agent "org.springframework:springloaded:1.2.8.RELEASE" // (Optional) Native OSX file watcher runtimeOnly "io.methvin:directory-watcher:0.9.6" //... } 上投放click事件时 内部的<mat-sidenav-content (click)="isNavBarOpened=false">无法正常工作。

这里是example

3 个答案:

答案 0 :(得分:2)

在mat-slide切换组件上添加$ event.stopPropagation(),以免事件冒泡。

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

Forked Example

答案 1 :(得分:0)

收听change事件,并相应地切换布尔值。

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

答案 2 :(得分:0)

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

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

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

closeNavBar() {
this.isNavBarOpened=false;
}

Forked Example