打开sidenav时如何禁用背景

Question

我正在使用角度材料 sidenav 来实现一些应用程序设置功能，以实现我们在 Google 中拥有的功能。 不同之处在于我从另一个组件调用此 sidenav 并将路由器也包装起来，以便它应该在应用程序标头下方打开。

<mat-sidenav-container class="main-sidenav">
      <app-sidenav></app-sidenav>
    
      <router-outlet></router-outlet>
    </mat-sidenav-container>

问题是当我打开 sidenav 它不会禁用背景。它应该自动实现背景样式。有什么办法可以明确地为相同的组件提供一些样式，还是我们应该考虑一些不同的组件？请建议。以下是同一场景的示例 stackblitz 示例

Stackblitz link

Answer 1

在您的 html 中将 hasBackdrop 标志设置为 true：

<mat-sidenav-container class="main-sidenav" hasBackdrop="true">
      <app-sidenav></app-sidenav>
    
      <router-outlet></router-outlet>
    </mat-sidenav-container>

根据 sidenav 的材料文档：

使用您的 stackblitz，我通过检查元素确认了背景渲染：

但是你没有看到暗影，因为缺少 css。要解决此问题，请在您的 styles.css 文件中添加以下内容。

.mat-drawer-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

此外，要使 sidenav 看起来像问题中的屏幕截图，您需要在 sidenav 类中添加一些 css 属性。

.sidenav {
  margin-top: 35px;
  margin-left: 25px;
  display: block;
  width: 200px;
  height: 100%;
  position: fixed;
  background: #FFF;
}

结果：

Stackblitz Demo