angular - mat-menu 在重新加载页面上失去设计

Question

如果我想重新加载页面，mat-menu 会重新设置 mat-menu-item 失去它的设计。但不在“仪表板”按钮上。此外，当我在重新加载后单击“仪表板”按钮时，它会恢复设计。

这是我的html：

<mat-drawer-container fullscreen class="sidenav-container" [hasBackdrop]="this.mobileChecker.checkIfMobile()"
 (window:resize)="onResize($event)" style="background: grey">
<mat-drawer #drawer [mode]="this.mobileChecker.checkIfMobile() ? 'over' : 'side'">
<!-- <button mat-menu-item class="sideNavButton">
  <mat-icon>
    <i class="material-icons">perm_identity</i>
  </mat-icon>
  {{ "APP_COMPONENT.menu.login" | translate}}
</button> -->
<div mat-menu-item>
  <mat-icon>
    <i class="material-icons">storage</i>
  </mat-icon>
  <app-project-selection [mode]="'Menu'"></app-project-selection>
</div>
<button mat-menu-item class="sideNavButton" (click)="clickDashboard()">
  <mat-icon>
    <i class="material-icons">dashboard</i>
  </mat-icon>
  {{ "APP_COMPONENT.menu.dashboard" | translate}}
</button>
<button mat-menu-item class="sideNavButton" (click)="clickNewProt()">
  <mat-icon>
    <i class="material-icons">list_alt</i>
  </mat-icon>
  {{ "APP_COMPONENT.menu.protocolWizzard" | translate}}
</button>
<button mat-menu-item class="sideNavButton" (click)="clickEditTasks()">
  <mat-icon>
    <i class="material-icons">border_color</i>
  </mat-icon>
  {{ "APP_COMPONENT.menu.taskUpdater" | translate}}
</button>
<button mat-menu-item *ngIf="isAdminButtonShown()" class="sideNavButton" (click)="clickLevelEditor()">
  <mat-icon>
    <i class="material-icons">border_color</i>
  </mat-icon>
  {{ "APP_COMPONENT.menu.levelFamily" | translate}}
</button>
<button mat-menu-item *ngIf="isAdminButtonShown()" class="sideNavButton" (click)="clickAdminEditor()">
  <mat-icon>
    <i class="material-icons">border_color</i>
  </mat-icon>
  Administration
</button>
<div class="inner-content" style="left: 15px">
  <mat-icon>
    <i class="material-icons">
      language
    </i>
  </mat-icon>
  <mat-button-toggle-group [(ngModel)]="this.language" style="margin-left: 15px; bottom: 8px" name="fontStyle" aria-label="Font Style"
    (valueChange)="languageChanged($event)">
    <mat-button-toggle style="color: black" value="en">EN</mat-button-toggle>
    <mat-button-toggle style="color: black" value="ger">DE</mat-button-toggle>
  </mat-button-toggle-group>
</div>
<!--<button mat-menu-item class="sideNavButton" (click)="clickProtEditor()">
  <mat-icon>
    <i class="material-icons">border_color</i>
  </mat-icon>
  Protocol Editor
</button>!-->

这是我的CSS：

  .sideNavButton{
  background-color: #ffffff;
  width: 100%;
  }

它应该是什么样子：

重新加载页面后，它看起来像这样：

我需要改变什么设计仍然存在？

标签： angularangular-materialmenuitem