Отсутствует значок гамбургера в приложении Angular Material - PullRequest
Новая
       25

Отсутствует значок гамбургера в приложении Angular Material

1 голос
/ 12 мая 2019

Я новичок в мире Angular и хочу создать панель инструментов (с SideNav и TopNav) с Angular Material. Итак, я установил все и добавил библиотеку Angular Material через: 

ng add @angular/material

Я также добавил готовый компонент для sideNav и TopNav и назвал его «mynav»: 

ng add @angular/material:nav mynav

когда я запускаю " ng serve -o ", я получаю sideNav и TopNav, как и хотел, но ЗНАЧОК ГАМБУРГЕРА для отображения и скрытия sideNav отсутствует на рабочем столе (или на любом другом широкоэкранном устройстве) Посмотреть. Смотрите изображение здесь: enter image description here. Тем не менее, в мобильном представлении (или в любом другом устройстве с небольшим экраном) «Меню гамбургера» видно и работает (функция переключения: открывать и скрывать SideNav). См. Изображение здесь: enter image description here.

Как заставить «Гамбургер Иконку» появляться на больших экранах, таких как ноутбуки или настольные компьютеры? Я знаю, что должен изменить точки останова для этого, но как? Вот сгенерированный код в " mynav.component.html ": 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <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>project1</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

1 Ответ

0 голосов
/ 12 мая 2019

Весьма вероятно, что вы не импортировали для этого необходимые модули.

Вам нужно будет зарегистрировать компонент mat-icon, так как вы в настоящее время используете его для значка гамбургера в вашем меню. Поэтому вам нужно будет импортировать MatIconModule, который объявляет компонент. То же самое касается MatButtonModule.

В модуле, использующем меню навигации, внесите следующие изменения: 

import { MatButtonModule, MatIconModule } from '@angular/material';    

@NgModule({
  imports: [
    MatButtonModule,
    MatIconModule,
    // other imported modules
  ],
  // others
...