子列表上的子项目

由 nquis发布于 2020-05-09 17:53:23

我正在做一个关于Angular的菜单页面。我要在此屏幕中创建一个子菜单。例如，带有“ Enviar mensaje”的选项，当我按那里时，后面会有一些选项。

我用以下代码做到了：

 <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>

你能帮我做吗？谢谢！！

podio

2020-05-09 17:53:24

You just have to add mat-sidenav-content and mat-toolbar for this to work. Here is how you can do this. Firstly add mat-sidenav-content which will place your content on the right side of the page. Then add mat-toolbar which will be the top menu bar used to open and close sidenav bar with a hamburger button.

For click event, you will add sidenav.toggle() which is material's own method for toggling the nav. Here sidenav is the reference variable defined on 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>

Once this is done, add it inside your mat-sidenav tag.

<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>

Working Example: https://stackblitz.com/edit/angular-material-sidenav-generate-nav

nquis

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3215
注册排名
1678