时间戳

首页 > 解决方案 > 多次调用相同的 mat-sidenav (Angular)

angular - 多次调用相同的 mat-sidenav (Angular)

问题描述

在下面的代码中，我两次调用sidenav.toggle。一个在 div 和一个按钮处。但是sidenav仅在div单击时打开。单击按钮时sidenav未打开。

任何人都可以为此提供解决方案。

<mat-card-content> 
                <div (click)="sidenav.toggle()" class="vl" >
                <mat-sidenav-container>
                    <mat-sidenav #sidenav  mode="side">
                       ...
                    </mat-sidenav>
                    <mat-sidenav-content>
                     <button mat-icon-button (click)="sidenav.toggle()">
                        <i class="fa fa-arrow-circle-o-right"></i>
                      </button>
                    </mat-sidenav-content>
                  </div>
</mat-card-content>

提前致谢 ：）

请在这件事上给予我帮助

标签： angular

解决方案

那是因为点击事件也会冒泡到 div，所以toggle()被调用了两次。一个用于按钮单击侦听器和 div 单击侦听器。你需要使用.stopPropagation()来防止这种情况：

<mat-card-content> 
  <div (click)="sidenav.toggle()" class="vl" >
    <mat-sidenav-container>
      <mat-sidenav #sidenav mode="side"></mat-sidenav>
      <mat-sidenav-content>
        <button mat-icon-button (click)="$event.stopPropagation(); sidenav.toggle()">
          <i class="fa fa-arrow-circle-o-right"></i>
        </button>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
</mat-card-content>

也许在你的组件中使用一个函数更简洁，但你明白了

推荐阅读