Подпункт в мат-листе

Question

Я делаю страницу меню на Angular. Я хочу создать на этом экране подменю. Например, вариант с «Enviar mensaje», и когда я нажимаю там, чтобы иметь некоторые варианты за go там.

Я сделал это с помощью этого кода:

 <mat-sidenav-container>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <br/><br/><br/>
        <a mat-list-item [routerLink]="'/versolis'"> Visualizar solicitudes </a>
        <a mat-list-item [routerLink]="'/enviarB2'"> Enviar mensaje B2 NNSS </a>
        <a mat-list-item [routerLink]="'/enviarB2baja'"> Enviar mensaje B2 Baja </a>
        <a mat-list-item [routerLink]="'/enviarB4'"> Enviar mensaje B4 NNSS </a>
        <a mat-list-item [routerLink]="'/enviarB4baja'"> Enviar mensaje B4 Baja </a>
        <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Cerrar sesión</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>

Не могли бы вы мне помочь? Спасибо !!

Answer 1

Вам просто нужно добавить mat-sidenav-content и mat-toolbar, чтобы это работало. Вот как это сделать. Сначала добавьте mat-sidenav-content, который разместит ваш контент в правой части страницы. Затем добавьте mat-toolbar, который будет верхней строкой меню, используемой для открытия и закрытия боковой панели с помощью кнопки гамбургера.

Для события щелчка вы добавите sidenav.toggle(), который является собственным методом материала для переключения навигации. Здесь sidenav - это ссылочная переменная, определенная в mat-sidenav

  <mat-sidenav-content>
    <div style="height: 88vh;">
        <mat-toolbar color="primary">
          <button  mat-icon-button 
                   aria-label="Menu"
                   (click)="sidenav.open()">
          <mat-icon>menu</mat-icon>
        </button>  
  </mat-toolbar>

Как только это будет сделано, добавьте ее в свой тег mat-sidenav.

<mat-sidenav-container>
  <mat-sidenav #sidenav>   //========> sidenav reference defined
    <mat-nav-list>
      <a *ngFor="let route of routes"
         mat-list-item  
         [routerLink]="route.path" 
         (click)="sidenav.toggle()"> {{route.label}}</a> //=====> use reference to toggle nav
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 88vh;">
        <mat-toolbar color="primary">
          <button  mat-icon-button 
                   aria-label="Menu"
                   (click)="sidenav.open()">
          <mat-icon>menu</mat-icon>
        </button>  
  </mat-toolbar>
    <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Рабочий пример : https://stackblitz.com/edit/angular-material-sidenav-generate-nav