在任何按钮上单击内部关闭角度材料sidenav

Question

我的应用程序上有一个Angular 4 Material Sidenav,它有一堆按钮,其中一些调用函数,另一些调用其他页面.

除了让每个按钮调用相同的函数然后查找要调用的函数(比如发送的参数上的开关)之外,是否有内置的方法让sidenav关闭子点击？

这是sidenav的样子:

<md-sidenav #sidenav align="end">
    <br/>
    <span style="margin: 17px">{{auth?.userProfile?.name}}</span> <br />
    <button md-button routerLink="/spells"> All Spells </button> <br />
    <button md-button (click)="login()" *ngIf="!auth.authenticated()">Log In</button>
    <button md-button routerLink="/spellbook" *ngIf="auth.authenticated()"> My Spellbooks </button> <br />
    <button md-button (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button>
</md-sidenav>

Answer 1

我看到了这个问题,我发现有一个默认事件与你可以使用的sidenav相关联.如果你(click)="sidenav.toggle()"在sidenav(或sidenav本身)内放任何东西它应该关闭.这是我的代码:

<mat-sidenav-container class="container">
  <mat-sidenav #sidenav (click)="sidenav.toggle()">
    <p class="menu-item">
      <a routerLink="">
        <button mat-button><mat-icon>dashboard</mat-icon><span> Dashboard</span></button>
      </a>
    </p>
    <p class="menu-item">
      <a routerLink="account">
        <button mat-button><mat-icon>account_circle</mat-icon><span> My Account</span></button>
      </a>
    </p>
    <p class="menu-item">
      <button mat-button><mat-icon>clear</mat-icon><span> Log Out</span></button>
    </p>
  </mat-sidenav>

  <mat-sidenav-content>
    <div id="menu-bar">
      <button mat-button (click)="sidenav.open()" id="menu-button"><mat-icon style="color: #fff;">menu</mat-icon></button>
      <span id="app-title">App Name</span>
    </div>

    <div class="internal-container">
        <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 2

只是偶然发现了这一点，如果你使用的话，(click)="sidenav.mode === 'side' || sidenav.close()只有在结束模式下才会关闭。

Answer 3

我建议你有两种方法。

1.处理按钮的点击事件并将逻辑放在组件中。

<button md-button  (click)="routeToSpells()"> All Spells </button> <br />
<button md-button (click)="login()" *ngIf="!auth.authenticated()">Log In</button>
<button md-button (click)="reouteToSpellBook()" *ngIf="auth.authenticated()"> My Spellbooks </button> <br />
<button md-button (click)="logout()" *ngIf="auth.authenticated()">Log Out</button>



routeToSpells(){
    this.sidenav.close();
    this.router.navigat('...')
}

login(){
    this.sidenav.close();
    .....
}
reouteToSpellBook(){
    this.sidenav.close();
    this.router.navigat('...')
}

logout(){
    this.sidenav.close();
    this.auth.logout
}

或者在子组件中实现 OnDestroy() 并在任何原因下关闭侧面导航