Question

我在项目中使用escape，在调整为移动尺寸时，side-nav会显示在左侧，如下所示：

现在，side-nav在单击side-nav时即将关闭的问题（{客户}）用于router link，我希望仅对小型设备all devices关闭：

我知道这是此question:

的副本

但是这些答案使(i,e mobile)对于所有设备都关闭了。

app-nav.html

side-nav

应用导航

 <mat-sidenav-container class="sidenav-container">
       <mat-sidenav #drawer class="sidenav mat-elevation-z4" 
           fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 
           'dialog' : 'navigation'"
          [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="! 
          (isHandset$ | async)">

             <mat-toolbar>Business</mat-toolbar>
                    <h2>{{business.name}}</h2>
                    <p class="">{{business.branch}}</p>
             <mat-divider></mat-divider>

           <mat-nav-list>
             <mat-list-item>
             <mat-icon matListIcon>home</mat-icon>
             <a matLine>Home</a>
          </mat-list-item>

          <mat-list-item  [routerLink]="['../customer']">
           <mat-icon matListIcon>person</mat-icon>
           <a matLine>Customers</a>
          </mat-list-item>

          <mat-list-item>
           <mat-icon matListIcon>group</mat-icon>
           <a matLine>Staff</a>
         </mat-list-item>
      </mat-sidenav>

      <mat-sidenav-content>
         <mat-toolbar class="ylet-header"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>
      </mat-sidenav-content>

 </mat-sidenav-container>

Answer 1

要实现此目的，您必须使用RouterOutlet事件之一。

只需对activate或deactivate事件做出反应即可通过opened输入来切换Sidenav：

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>

使用Angular CDK中的BreakpointObserver检索信息“是否移动？”像这样：

this.breakpointObserver.isMatched('(max-width: 767px)');

side-nav在选择路由器链接时对所有设备关闭

1 个答案: