Question

我在项目中使用side-nav组件在组件之间进行路由，如下所示：

我在这里遇到问题。side-nav对于移动设备显示为toggle-menu，如图所示。当我click/select中的任何list-item (ex Home)时，side-nav应该关闭。

我问过一次，仍然没有合适的解决方案。

这里是DEMO的堆叠闪电战

Answer 1

您可以通过以下方式实现

提供对mat-sidenav的引用为<mat-sidenav #snav
使用对toggle的{{1}}或close的引用，从此位置关闭此侧面导航。说，从锚点单击为
mat-sidenav
您可以使用<a mat-list-item routerLink="." *ngFor="let nav of fillerNav" (click)="snav.toggle()" >或(click)="snav.toggle()"

代码：

(click)="snav.close()"

Stackblitz Demo showing closing of side nav on clicking on item-link

应用代码： https://stackblitz.com/edit/angular-close-side-nav-on-button-click?file=app%2Fsidenav-responsive-example.html

更新1：

Side Nav仅在移动模式下关闭，而在桌面模式下不会关闭。

Code attached in Question

Answer 2

不是最佳解决方案，但请考虑以下问题：

    <mat-sidenav-container class="sidenav-container">
      <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
        <mat-toolbar color="primary" style="margin-top:30px;"> Business</mat-toolbar>

        <mat-nav-list >
          <mat-list-item (click)="select('home')"  >
            <mat-icon matListIcon>home</mat-icon>
            <span matLine>Home</span>
          </mat-list-item>

          <mat-list-item (click)="select('person')" >
            <mat-icon matListIcon>person</mat-icon>
            <span matLine>Customers</span>
          </mat-list-item>

          <mat-list-item (click)="select('employees')" >
            <mat-icon matListIcon>group_work</mat-icon>
            <span matLine>employees</span>
          </mat-list-item>

          <mat-list-item (click)="select('business')">
            <mat-icon matListIcon>business</mat-icon>
            <span matLine>Business</span>
          </mat-list-item>

        </mat-nav-list>
      </mat-sidenav>

      <mat-sidenav-content>
        <mat-toolbar color="primary">
          <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>

        </mat-toolbar>

        <div class="ylb-app-content">
          <ng-content></ng-content>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>

，然后在ts中添加以下功能：

select(option: string) {
  // handle it
  this.viewChild.toggle();
}

Answer 3

在您的演示中，我在component.ts文件中添加了以下内容，并且工作正常。我在ts文件中引用了element并称为toggle方法。请尝试此操作，让我知道它是否工作正常。

export class SidenavResponsiveExample {
    @ViewChild('drawer') drawer;

    selected(option: string) {
        this.drawer.toggle();
    }
}

演示：https://stackblitz.com/edit/angular-5ll5i7-a6je6c

单击小型设备的路由器链接时关闭side-nav

3 个答案: