материал сиденав не открывается

Question

У меня есть мат-навигация с боковой навигацией.Я не получаю ошибок, и когда я сжимаю окно, в навигационной панели появляется кнопка переключения sidenav, но когда я нажимаю на нее, ничего не происходит.Экран просто мигает, но sidenav не отображается.Я следовал тому, что я думал, что письмо было примером, который я нашел, и не могу найти никакой разницы между моей реализацией и рабочей, но должна быть некоторая разница.Полный проект можно найти здесь: github project

Как мы даже отлаживаем угловые приложения?В этом случае даже включение файла 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.
Надеюсь, это поможет:)