0

Angular SideNav 的主要问题之一是除了 sidenav 之外的所有东西都必须在mat-sidenav-content.

我有一个特定于页面的过滤器部分，要实现为 sidenav。因此，我不希望应用程序的其余部分受到此更改的影响，因此需要单独的独立 sidenav。

为了克服这个问题，我创建了一个单独的组件，其中包含空mat-sidenav-content的并使用 css 管理 sidenav 视图（通过设置一些高度、白色背景色、阴影等）

我不确定这是否是正确的做法，但它至少允许我将它放在一个单独的组件下，而不是在 sidenav 内容中拥有路由器插座和应用程序的所有其他内容。

然而，问题是我无法使用(backdropClick)需要页面其余部分位于 mat-sidenav-content 下的事件，因为我希望在我们单击此组件外部时关闭 sidenav。

在尝试解决原始问题时，我是否朝着完全错误的方向前进，并最终遇到了可能不会出现的问题，如果我mat-sidenav像其他人一样使用过吗？

下面是我的代码，寻找建议

HTML

<mat-sidenav-container (backdropClick)="sidenav.close()"
  class="{{sidenav.opened ? 'side-nav-on shadow' : 'side-nav-off'}}">
  <mat-sidenav class="sidenav" #sidenav>
    <p> The filter content goes here</p>
  </mat-sidenav>
  <mat-sidenav-content>
  </mat-sidenav-content>
</mat-sidenav-container>

CSS

.sidenav {
  display: flex; 
}

.side-nav-on {
  position: fixed;
  max-height: 600px;
  width: 400px;
  background-color: #ffffff;
  top: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
}

.side-nav-off {
 position: absolute;
 height: auto;
 width: auto;
}
.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

在组件中触发（基于行为主体） - 部分相关代码

@ViewChild('sidenav') sidenav: MatSidenav;
...
 this.sharedservice.openFiltersNav
      .subscribe((val) => {
        if (val === true) {
          this.sidenav.open();
        }
      });
4

0 回答 0