Question

我有一个带侧边导航的垫导航栏。我没有收到任何错误，并且当我缩小窗口时，导航栏上出现了sidenav切换按钮，但是当我单击它时，什么也没有发生。屏幕仅闪烁，但不显示sidenav。我遵循了我认为的示例示例，并没有发现实现与工作示例之间有任何区别，但必须有所区别。完整的项目可以在这里找到：github project

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

谢谢...

Answer 1

由于要放入 href ='＃'，所以您要重新加载，因此不应该在angular中使用。只需将其删除，即可解决重新加载问题。或仅使用此代码替换您的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上也向您发送了拉取请求。
希望对您有所帮助：）

物料侧面未打开

1 个答案: