logo标签列表

如何使用Angular Mat-Nav Material创建嵌套菜单？（已更新）

angularnestednavigationsubmenu
8

我正在尝试为我的 angular 应用程序创建嵌套的 mat-menu 项。我找到了一些解决方案，但它们只能将嵌套选项显示为弹出窗口，而我希望它是一个下拉菜单，在触发时可以选择其下面的菜单。

我尝试使用 mat-sidenav-container，并根据条件提供了一些条件来打开菜单。

 <mat-nav-list>
     <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
          <span class="full-width" *ngIf="isExpanded || 
            isShowing">Users</span>
       <mat-icon mat-list-icon>supervisor_account</mat-icon>
        <mat-icon class="menu-button" [ngClass]="{'rotated' : 
          showSubmenu}" *ngIf="isExpanded || 
             isShowing">expand_more</maticon>
        </mat-list-item>
        <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" 
           *ngIf="isShowing || isExpanded">
          <div [routerLink]="['users']" routerLinkActive="active" 
             (click)="toggleSide()">Add Users</div>
          </div>
    </mat-nav-list>
``in the above code. i would like to nest Manage Users under Users list item``` and my .ts file follows:

showSubmenu: boolean = false;
  isShowing = false;
  showSubSubMenu: boolean = false;
  isExpanded = true;

i would like the expected result to be like this (https://stackblitz.com/edit/material-sidenav-example?file=app%2Fsidenav-autosize-example.html)

我尝试使用与上面链接中相同的元素，但无法使它工作。我可能犯了一个非常愚蠢的错误。提前致谢！

5个回答
9
1
感谢您的努力，@mohammed。我可以请您提供源代码吗？在我的代码中，我应该在哪里进行编辑才能实现您提到的示例呢？ - krishna ram
3
我提到的例子创建了一个动态通用菜单列表项，可以在需要时重复使用。就是这个组件： https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fmenu-list-item%2Fmenu-list-item.component.ts - Mohamed Ben Amar
请稍等，我会提供单个项目的解决方案。 - Mohamed Ben Amar
很高兴能帮助，好的，没问题。 - Mohamed Ben Amar
1
很好，你提供了编辑你的StackBlitz项目的链接。我无法从你在答案中提供的链接中获取源代码。 - Torsten Barthel
顺便说一下，我喜欢navService的方法。有一个建议...你可以在汉堡菜单上调用toggle()方法。这将打开和关闭侧边栏，而无需分别处理它们。 - hbthanki
1

从你的代码中

     <mat-nav-list style="width:300px">
        <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
            <span class="full-width" *ngIf="isExpanded || 
                isShowing">Users</span>
            <mat-icon mat-list-icon>supervisor_account</mat-icon>
            <mat-icon class="menu-button" [ngClass]="{'rotated' : 
              showSubmenu}" *ngIf="isExpanded || 
                 isShowing">expand_more</mat-icon>
            </mat-list-item>
        <div *ngIf="showSubmenu">
        <a menu-list-item >
          Mangage users
        </a>
        </div>
            <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" 

               *ngIf="isShowing || isExpanded">
              <div  
                 (click)="toggleSide()">Add Users</div>
              </div>
        </mat-nav-list>

但在实践中这并不好，如果有很多嵌套的情况，那么请使用通用的方法。

请问您能否在 https://stackblitz.com/ 上为我提供一个可用的示例？我认为它缺少了服务和路由器属性。 - krishna ram
1
https://stackblitz.com/edit/material-sidenav-example?file=app%2Fsidenav-autosize-example.html - Mohamed Ben Amar
我使用了上述内容，并将其视为一个示例，尝试在我的代码中实现相同的功能。但是它没有起作用。我已经更新了问题，以使其更具体。感谢您的时间，@Mohammed。 - krishna ram
这是因为您正在为所有菜单使用相同的bool变量“showSubmenu”。我建议您使用一个通用变量，并从ts控制子菜单数据。 - Mohamed Ben Amar
不，我尝试使用另一个变量名showSubmenuu来表示第二个菜单，但仍然无法正常工作。 - krishna ram
显示剩余2条评论
1

与 OP 的特定需求无关，但这是一个有趣的嵌套菜单：

它演示了 Angular 模板如何类似于 Javascript，即模板创建一种闭合范围。由于这个原因，我能够创建一个动态嵌套菜单，没有重复的代码。

这里的关键是方法调用 setFont(target, font)，其中 target 的值被“封闭”，因此当项目被点击时，它引用正确的项。

<!-- fonts menu -->
<mat-menu #fontMenu="matMenu">

    <ng-container *ngFor="let target of ['Header', 'Body']">
        
        <!-- submenu for each target -->
        <button mat-menu-item [matMenuTriggerFor]="fontsMenu">
            <span>{{ target }} font</span>
        </button>

        <!-- submenu for each font -->
        <mat-menu #fontsMenu="matMenu">
            <ng-container *ngFor="let font of ['Arial', 'Comic Sans']">

                <button mat-menu-item (click)="setFont(target, font)">
                    <span>{{ font }}</span>
                </button>  

            </ng-container>
        </mat-menu>

    </ng-container>

</mat-menu>

enter image description here

0

我是这样做的

<mat-nav-list>
  <mat-accordion>
    <mat-expansion-panel style="box-shadow: none">
      <mat-expansion-panel-header style="margin-left: -8px">
        <mat-panel-title> <mat-icon>code</mat-icon>&nbsp;Developers </mat-panel-title>
      </mat-expansion-panel-header>
      <a
        mat-list-item
        routerLink="test"
        class="sidenav__list-item list-sub-item"
        [routerLinkActive]="['active']"
        (click)="handleClickEvent($event)"
      >
        <mat-icon>api</mat-icon>
        <span style="padding-top: 11px;">Api Keys</span>
      </a>
      <a
        mat-list-item
        routerLink="test1"
        class="sidenav__list-item list-sub-item"
        [routerLinkActive]="['active']"
        (click)="handleClickEvent($event)"
      >
        <mat-icon>webhook</mat-icon>
        <span style="padding-top: 11px;">Web Hooks</span>
      </a>
    </mat-expansion-panel>
  </mat-accordion>
</mat-nav-list>

this is how it looks finally

0
根据 Angular Material。
     <button mat-button [matMenuTriggerFor]="animals">Animal index</button>

<mat-menu #animals="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
  <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
  <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>

<mat-menu #invertebrates="matMenu">
  <button mat-menu-item>Insects</button>
  <button mat-menu-item>Molluscs</button>
  <button mat-menu-item>Crustaceans</button>
  <button mat-menu-item>Corals</button>
  <button mat-menu-item>Arachnids</button>
  <button mat-menu-item>Velvet worms</button>
  <button mat-menu-item>Horseshoe crabs</button>
</mat-menu>

<mat-menu #fish="matMenu">
  <button mat-menu-item>Baikal oilfish</button>
  <button mat-menu-item>Bala shark</button>
  <button mat-menu-item>Ballan wrasse</button>
  <button mat-menu-item>Bamboo shark</button>
  <button mat-menu-item>Banded killifish</button>
</mat-menu>

<mat-menu #amphibians="matMenu">
  <button mat-menu-item>Sonoran desert toad</button>
  <button mat-menu-item>Western toad</button>
  <button mat-menu-item>Arroyo toad</button>
  <button mat-menu-item>Yosemite toad</button>
</mat-menu>

<mat-menu #reptiles="matMenu">
  <button mat-menu-item>Banded Day Gecko</button>
  <button mat-menu-item>Banded Gila Monster</button>
  <button mat-menu-item>Black Tree Monitor</button>
  <button mat-menu-item>Blue Spiny Lizard</button>
  <button mat-menu-item disabled>Velociraptor</button>
</mat-menu>
感谢您的努力，@mustafa，但这不是我想要的。我希望sumenu能像这个（https://stackblitz.com/edit/material-sidenav-example?file=app%2Fsidenav-autosize-example.html）一样被动画化。我不希望它们像弹出窗口一样被动画化，因为这会使页面变得混乱。 - krishna ram
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接