0

我正在使用 mat-sidenav-container。我的代码可以在 İE、Chrome、Firefox 上正常运行。但仅在野生动物园中损坏；app-header 必须在顶部并固定。但它似乎不在顶部。我认为这个错误与位置有关：绝对。但我无法解决

应用程序组件；

<mat-sidenav-container [ngClass]="{'container':(!currentUrl && userAuth)}">
  <mat-sidenav [ngClass]="{'sidenavUser':(isExpanded && !currentUrl && userAuth),
                            'sidenavExpanded':(!currentUrl && userAuth && !isExpanded && !mobileQuery.matches)}"
   #sidenav role="navigation"
   [mode]="mobileQuery.matches ? 'over' : 'side'" 
   [(opened)]="!mobileQuery.matches && userAuth "
   fullscreen>

    <app-sidenav [mobileQuery]="mobileQuery.matches"  [userAuth]="userAuth$" (closeSidenav)="sidenavClose($event)"></app-sidenav>
  </mat-sidenav>

  <mat-sidenav-content>
    <app-header [ngClass]="{'header':(!currentUrl && userAuth)}"  [userAuth]="userAuth$"
      (sidenavToggle)="sidenav.toggle()"></app-header>

    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

app.component.css

mat-sidenav{
  width: 250px;
  z-index: 1000;
}

  .sidenavUser {
    width: 250px;
    position: fixed;
    top:80px;
    bottom: 0px;
    z-index: 1000;
  }
  .sidenavExpanded{
    width: auto;
    position: fixed;
    top:80px;
    bottom: 0px;
    z-index: 1000;
    }

  mat-sidenav-content{

      height: 100%;
  }
  mat-sidenav-container{
  background-color: rgb(246, 246, 248);
  width: 100%;
  margin: 0;
  min-height: 1000px;
  }


  .container {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color:transparent;

  }

  .menuButton{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;

  }

.container 和标头位置绝对不起作用。我的工具栏首先是不可见的。

工具栏.css

.toolbarTop{
  background-color:transparent;
  position: fixed;
  top: 0; /* Sets the sticky toolbar to be on top */
  height: 80px;
  z-index: 2;
  margin: 0;

} 
.toolbarOffsetY{
  background-color:rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0; /* Sets the sticky toolbar to be on top */
  height: 80px;
  z-index: 1000;
  margin: 0;

}
.toolbarUser{
  background-color:rgba(0, 0, 0, 0.5);
  position: -webkit-sticky;
  position: sticky;
   /* For macOS/iOS Safari */
  top: 0; /* Sets the sticky toolbar to be on top */
  height: 80px;
  z-index: 1000;
  margin: 0;

}
4

1 回答 1

0

我可以解决这个问题。我改变了应用程序头的位置。因为当 app-header 在 mat-sidenav-container 中时，安全性出现了问题。这是我的新代码；

<div fxFlex>
**<app-header  [userAuth]="userAuth$"
      (sidenavToggle)="sidenav.toggle()"></app-header>**
<mat-sidenav-container autosize>
  <mat-sidenav [ngClass]="{'sidenavUser':(isExpanded && !currentUrl && userAuth),
                            'sidenavnotExpanded':(!currentUrl && userAuth && !isExpanded)}"
   #sidenav role="navigation"
   [mode]="mobileQuery.matches || currentUrl  ? 'over' : 'side'" 
   [(opened)]="!mobileQuery.matches && userAuth "
   fullscreen>

    <app-sidenav 
    [mobileQuery]="mobileQuery.matches"
    [currentUrl]="currentUrl" 
    [userAuth]="userAuth$"
    (closeSidenav)="sidenavClose($event)"></app-sidenav>
  </mat-sidenav>

  <mat-sidenav-content>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>
</div>

并添加了CSS

mat-sidenav-container{
  position: unset;
}

有效。

于 2019-11-26T08:56:49.677 回答