自动关闭 angular material 通讯菜单

Question

有什么方法可以在我离开侧边菜单时自动关闭侧边菜单。我已经尝试使用包含带有 mouseenter 和 mouseleave 的 hostlistener 的指令，但是我怎么才能知道我不在 sidemenu 上。

你可以在这里演示：https://stackblitz.com/angular/qrnojyvlgbx?file=src%2Fapp%2Fsidenav-autosize-example.html

但看起来 stackblitz 也坏了

Answer 1

您可以在 sidenav 元素上使用 mouseleave 事件来关闭 sidenav。

首先，使用变量引用该 sidenave，例如：

<mat-sidenav #sidenav>

然后使用 mouseleave 事件，如：

<mat-sidenav #sidenav (mouseleave)="sidenav.close()">

检查这个例子： https://stackblitz.com/edit/angular-material-with-angular-sidenav?file=app/sidenav/sidenav.component.html

<mat-sidenav #sidenav  mode="side" class="example-sidenav"  opened="true"
        (mouseleave)="sidenav.close()">
        <div class="logomain">Logo Part</div>
        <mat-nav-list>
          <mat-list-item routerLink="1" routerLinkActive="active" >
            <mat-icon mat-list-icon>person</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="lead">About</h5>
            </div>
          </mat-list-item>
    
          <mat-list-item routerLink="2" routerLinkActive="active">
            <mat-icon mat-list-icon>settings</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="lead">Services</h5>
            </div>
          </mat-list-item>
    
          <mat-list-item routerLink="3" routerLinkActive="active">
            <mat-icon mat-list-icon>local_phone</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="lead">Contact</h5>
            </div>
          </mat-list-item>
        </mat-nav-list>
      </mat-sidenav>

自动关闭 angular material 通讯菜单

auto close angular material sidemenu

angular-material

angular