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

时间:2018-04-02 12:23:01

标签: angular angular-material

我有以下标记:

<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)。我添加了一个明确的方法,可以响应背景上的点击,但它没有响应。

1 个答案:

答案 0 :(得分:0)

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