angular - 角材料侧导航样式无法正常工作

Question

我正在尝试使用 angular 和 angular-material 创建一个新应用程序。我使用了最新版本的角材料和角材料。我创建了一个登录屏幕，并使侧导航仅出现在移动视图中。当屏幕最初在移动视图中加载时，所有侧导航链接似乎都没有任何样式显示。但是，一旦我登录并注销，链接似乎看起来不错。有人可以指导我如何解决这个问题。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="over"
      [opened]="false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <button mat-menu-item routerLink="/dashboard" *ngIf="isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="dashboard">dashboard</mat-icon>Dashboard</button>
      <button mat-menu-item routerLink="/reports" *ngIf="isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="reports">bar_chart</mat-icon>Reports</button>
      <button mat-menu-item routerLink="/home" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="home">home</mat-icon>Home</button>
      <button mat-menu-item routerLink="/home?#features" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="features">apps</mat-icon>Features</button>
      <button mat-menu-item routerLink="/home?#services" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="services">star_border</mat-icon>Services</button>
      <button mat-menu-item routerLink="/home?#pricing" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="pricing">monetization_on</mat-icon>Pricing</button>
      <button mat-menu-item routerLink="/home?#aboutus" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="about_us">info</mat-icon>About Us</button>
      <button mat-menu-item routerLink="/home?#contactus" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"><mat-icon aria-label="contact_us">person_pin</mat-icon>Contact Us</button>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary" *ngIf="isUserLoggedIn()">
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span><img class="img-responsive" src="assets/images/logo.png" alt="logo"></span>
        <span class="example-spacer"></span>

        <mat-form-field class="search-bar">
          <input matInput value="">
        </mat-form-field>

        <button mat-icon-button class="more-button margin-right" [matMenuTriggerFor]="notifications" aria-label="Toggle notifications">
          <mat-icon aria-label="Notifications" matBadge="5" matBadgeColor="warn">notifications</mat-icon>
        </button>
        <mat-menu #notifications="matMenu" xPosition="before">
          <button mat-menu-item>Notification 1</button>
          <button mat-menu-item>Notification 2</button>
          <button mat-menu-item>Notification 3</button>
          <button mat-menu-item>Notification 4</button>
          <button mat-menu-item>Notification 5</button>
          <mat-divider></mat-divider>
          <button mat-menu-item>View all Notifications</button>
        </mat-menu>

        <button mat-icon-button class="more-button" [matMenuTriggerFor]="account" aria-label="Toggle account settings">
          <div mat-card-avatar class="example-header-image"></div>
        </button>
        <mat-menu #account="matMenu" xPosition="before">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>Shiba Inu</mat-card-title>
              <mat-card-subtitle>Dog Breed</mat-card-subtitle>
            </mat-card-header>
          </mat-card>
          <button mat-menu-item><mat-icon aria-label="account details">account_circle</mat-icon>Account</button>
          <button mat-menu-item><mat-icon aria-label="account settings">settings</mat-icon>Settings</button>
          <button mat-menu-item (click)="logout()"><mat-icon aria-label="log out">power_settings_new</mat-icon>Log out</button>
        </mat-menu>
      </mat-toolbar>
      <mat-toolbar color="primary" *ngIf="!isUserLoggedIn()">
          <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="(isHandset$ | async)">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
          <span><img class="img-responsive" src="assets/images/logo.png" alt="logo"></span>
          <a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home">Home</a>
          <a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#features">Features</a>
          <a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#services">Services</a>
          <a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#pricing">Pricing</a>
          <a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#aboutus">About us</a>
          <a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#contactus">Contact us</a>
          <span class="example-spacer"></span>
          <a mat-button class="out-line-button" routerLink="/login">Sign In</a>
      </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

下面是组件的css

 .sidenav-container {
      height: 100%;
    }

    .sidenav {
      width: 200px;
    }

    .sidenav .mat-toolbar {
      background: inherit;
    }

    .mat-toolbar.mat-primary {
      position: sticky;
      top: 0;
      z-index: 1;
      box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
    }

    .example-icon {
      padding: 0 14px;
    }

    .example-spacer {
      flex: 1 1 auto;
    }

    .example-header-image {
      background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
      background-size: cover;
    }

    .margin-right {
      margin-right: 16px;
    }

    .search-bar {
      width: 40%;
    }

    .img-responsive {
      width: 50px;
      height: 50px;
    }

    .out-line-button {
      border: 2px solid white;
    }

标签： angularangular-material