Angular 5材料sidenav在背景下不关闭

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个sidenavs：一个总是打开，另一个可以在打开和关闭之间切换。

问题在于，使用此代码，我已经能够实现上述内容，但是现在单击"背景"(Backdrop Mats-sidenav-container(，可拨动的Sidenav并没有关闭。我添加了一个明确的方法，该方法应该响应背景上的点击，但没有响应。

Answer 1

您的<mat-sidenav #searchSideNav position="end">需要在<mat-sidenav-content>元素之外。