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

Question

我的应用程序上有一个 Angular 4 Material 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()"

放在侧导航（或侧导航本身）内的任何内容上，它应该关闭。这是我的代码：

<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() 并在任何原因下关闭侧面导航

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"

一起工作。

Answer 5

添加

(click)="sidenav.close()"

以及

routerLink="/whatever/path/here"

“gmauch”建议的解决方案对我有用

Answer 6

让我们让它更通用一些，这样您就不必在每次点击时都处理这个问题。我假设你们大多数人都想使用侧导航导航到其他页面。

所以你会：

<div class="nav-container">
  <mat-toolbar color="primary" class="main-toolbar">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
  </mat-toolbar>

  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav #snav [mode]="'over'" [fixedInViewport]="true" fixedTopGap="56" role="navigation">
      <mat-nav-list>
        <mat-list-item routerLink="./home">Home</mat-list-item>
        <mat-list-item routerLink="./page-1">Page x</mat-list-item>
    </mat-sidenav>

    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

在 ts 中：

import { Component, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'test';
    private unsubscribe$ = new Subject<void>();

    @ViewChild('snav') snav!: MatSidenav;

    constructor(
        private router: Router
    ) {
        // routing events
        this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe();
        this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe((event: any) => {
            this._navigationInterceptor(event);
        });
    
    }

    private _navigationInterceptor(event: Event): void {
        if (event instanceof NavigationStart) {
            this.snav.close();
            this._showSpinner();
        }
        
    }
}

这样，当您切换到新页面时，侧面导航将始终关闭。 另请注意

mat-nav-list

和

mat-list-item

，有点无证，但更好。