Question

我有以下标记：

<mat-sidenav-container (backdropClick)="close()" class="dashboard-mat-sidenav-container">

  <mat-sidenav #leftSideNav mode="side"
   opened="true" position="start"
    [fixedInViewport]="true">
    <ak-left-nav></ak-left-nav>
  </mat-sidenav> 

  <mat-sidenav-content>        
     <ak-header>
      <ak-search-button (click)="searchSideNav.open()"></ak-search-button>
     </ak-header>    
     <ak-dashboard></ak-dashboard>

     <ak-left-nav-btn (click)="leftSideNav.open()"></ak-left-nav-btn>

     <div class="wb-menu-button" id="wb-button-search-mobile" (click)="searchSideNav.open()">        
        <div><i class="fas fa-search"></i></div>
     </div>

     <mat-sidenav #searchSideNav position="end">       
       Search bar  
     </mat-sidenav> 

  </mat-sidenav-content>
</mat-sidenav-container>

我想要达到的目标是：屏幕上有2个侧面：一个总是打开，另一个可以在打开和关闭之间切换。

问题是，使用此代码，我已经能够实现上述目标，但现在可切换的sidenav不会在背景点击时关闭（背景意味着mat-sidenav-container）。我添加了一个明确的方法，可以响应背景上的点击，但它没有响应。

Answer 1

您的<mat-sidenav #searchSideNav position="end">必须位于<mat-sidenav-content>元素之外。

Angular 5 Material Sidenav未在背景点击时关闭

1 个答案: