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

我会用两种方式建议你。

1.处理按钮的click事件并在组件中包含逻辑。

<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（）并在任何原因关闭侧导航

Answer 3

只是偶然发现了这一点，如果您使用(click)="sidenav.mode === 'side' || sidenav.close()，则只有在over模式下才能关闭。

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>

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

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

4 个答案: