在任何按钮上关闭Angular Material Sidenav，然后在内部单击

Question

我的应用程序上有一个Angular 4材料sidenav，其中有很多按钮，其中一些呼叫函数，而其他则通往其他页面。

除了让每个按钮调用相同的函数之外P>

这是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((，并在任何原因下关闭侧面nav

Answer 4

我只是想出了这一点：

<mat-sidenav-container [hasBackdrop]="true">
                <mat-sidenav #sidenav mode="side" class="sideNavigation">
                        <mat-nav-list>
                                <a mat-list-item routerLink="" (click)="sidenav.close()"> bar</a>
                                <a mat-list-item routerLink="/bar" (click)="sidenav.close()">foo</a>
                                <a mat-list-item routerLink="/foo" (click)="sidenav.close()">whatever</a>
                                <a mat-list-item routerLink="/something1" (click)="sidenav.close()">SomePage</a>
                                <a mat-list-item routerLink="/something2" (click)="sidenav.close()">Some Page</a>
                        </mat-nav-list>
                </mat-sidenav>
                <mat-sidenav-content>
                        <mat-toolbar color="accent">
                                <mat-icon (click)="sidenav.toggle()">menu</mat-icon> 
                                <div class="divider"></div>
                                <img class="img" src="../assets/img/logo.png" alt="logo" (click)="goHome()" />
                        </mat-toolbar>
                        <router-outlet></router-outlet>
                </mat-sidenav-content>
        </mat-sidenav-container>

与routerLink="/whatever/path/here"一起添加(click)="sidenav.close()"。

Answer 5

与routerLink="/whatever/path/here"一起添加(click)="sidenav.close()"
" gmauch"建议的解决方案为我工作