材料侧导航未打开

Question

我有一个带有侧面导航的垫子导航栏。我没有收到任何错误，当我缩小窗口时，导航栏中会出现 sidenav 切换按钮，但是当我点击它时没有任何反应。屏幕只是闪烁，但没有显示 sidenav。我已经按照我发现的示例进行了我的想法，并且在我的实现和工作之间找不到任何区别，但必须有一些区别。完整的项目可以在这里找到：github project

我们如何调试 Angular 应用程序？对于这种情况，即使放入 console.log 也无济于事？

谢谢...

Answer 1

您正在重新加载，因为您放置了不应在角度中使用的 href='#'。只需将其删除，然后它将解决重新加载问题。 或者只是用这段代码替换你的 app.component.html

    <div style="height: 100vh;">

  <mat-toolbar color="primary">
    <a routerLink="/home"><span><img class="navBar-img" src="/assets/CAP-Seal-75x75.png" height=60 width=60></span></a>

    <span class="lg-view" fxHide.lt-md>
      <b class="cawg">CAWG</b>&nbsp;&nbsp;
      <b class="cawg-header">T</b><span class="cawg-text">racking and </span>
      <b class="cawg-header">R</b><span class="cawg-text">emote&nbsp;</span>
      <b class="cawg-header">A</b><span class="cawg-text">ircraft&nbsp;</span>
      <b class="cawg-header">C</b><span class="cawg-text">ommunication&nbsp;</span>
      <b class="cawg-header">S</b><span class="cawg-text">ystem (TRACS) </span>
      <span class="cawg-text">3.0</span>
    </span>
    <span class="sm-view" fxHide.gt-sm>
      <b class="cawg-text">TRACS3</b>
    </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
      <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item>
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item (click)="historicalTracking()">
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
      </mat-menu>
      <button mat-icon-button routerLink="/settings" class="d-none d-sm-inline">
        <mat-icon>settings</mat-icon>
      </button>
      <button mat-icon-button routerLink="" class="d-none d-sm-inline">
        <mat-icon>chat_bubble_outline</mat-icon>
      </button>
      <button mat-icon-button routerLink="/bugreport" class="d-none d-sm-inline">
        <mat-icon>bug_report</mat-icon>
      </button>
      <button mat-icon-button routerLink="/about" class="d-none d-sm-inline">
        <mat-icon>info</mat-icon>
      </button>
      <button mat-button routerLink="login" class="nav-button">
        Sign In
      </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a (click)="sidenav.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </a>

    </div>

  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav #sidenav fxLayout="column">

      <div fxLayout="column">


        <mat-nav-list>
          <mat-list-item>
            <mat-icon>airplanemode_active</mat-icon>
            <a matLine>Real-Time Tracking</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon svgIcon="historical-tracking-black-48" style="color: black;"></mat-icon>
            <a matLine>Historical Tracking</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>grid_on</mat-icon>
            <a matLine>Display Grids</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>airplanemode_inactive</mat-icon>
            <a matLine>Stop Tracking</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>grid_off</mat-icon>
            <a matLine>Grids Off</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>settings</mat-icon>
            <a matLine routerLink="/settings">Settings</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>chat_bubble_outline</mat-icon>
            <a matLine>Toggle Chat Window</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>bug_report</mat-icon>
            <a matLine routerLink="/bugreport">Report Issue</a>
          </mat-list-item>
          <mat-list-item>
            <mat-icon>info</mat-icon>
            <a matLine routerLink-="about">About</a>
          </mat-list-item>
          <mat-list-item>
            <a matLine routerLink="login">Sign In</a>
          </mat-list-item>
        </mat-nav-list>

      </div>

    </mat-sidenav>

    <mat-sidenav-content fxFlexFill>
      <router-outlet></router-outlet>
      <ng-content></ng-content>
    </mat-sidenav-content>

  </mat-sidenav-container>

</div>

我也在 github 上给你一个 pull request。
希望对你有帮助:)