如何使用angular mat nav材质创建嵌套菜单?(更新)
我正在尝试为我的angular应用程序创建嵌套的mat菜单项。我得到了一些解决方案,只有当嵌套的选项显示为弹出窗口时,我希望它是一个下拉菜单,当触发时,我们可以选择它下面的菜单 我尝试使用mat sidenav容器,并根据条件给出了一些打开菜单的条件如何使用angular mat nav材质创建嵌套菜单?(更新),angular,nested,navigation,submenu,Angular,Nested,Navigation,Submenu,我正在尝试为我的angular应用程序创建嵌套的mat菜单项。我得到了一些解决方案,只有当嵌套的选项显示为弹出窗口时,我希望它是一个下拉菜单,当触发时,我们可以选择它下面的菜单 我尝试使用mat sidenav容器,并根据条件给出了一些打开菜单的条件 <mat-nav-list> <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent"> <span clas
<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)
使用者
监理人账户
进一步扩展
添加用户
``在上述代码中。我想在用户列表项``下嵌套管理用户,我的.ts文件如下:
显示子菜单:布尔值=假;
isShowing=假;
showSubSubMenu:boolean=false;
isExpanded=true;
我希望预期的结果是这样的(https://stackblitz.com/edit/material-sidenav-example?file=app%2Fsidenav-自动调整大小(示例.html)
我确实尝试使用与上面链接中相同的元素,但无法使其工作。我可能犯了一个愚蠢的错误。提前谢谢 您可以实现一个通用菜单列表项, 以下是一个例子:
根据角度材料
<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>
动物指数
脊椎动物
无脊椎动物
鱼
两栖动物
爬行动物
鸟
哺乳动物
昆虫
软体动物
甲壳动物
珊瑚
蜘蛛纲
天鹅绒蠕虫
马蹄蟹
贝加尔油鱼
巴拉鲨
巴兰濑鱼
竹鲨
带状魟鱼
索诺兰沙漠蟾蜍
西蟾蜍
阿罗约蟾蜍
约塞米蒂蟾蜍
斑节壁虎
带条纹的吉拉怪物
黑树监视器
蓝刺蜥蜴
速度捕捉器
来自您的代码
<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>
使用者
监理人账户
进一步扩展
管理用户
添加用户
但是这在实践中是不好的,如果你有很多嵌套,在这种情况下,使用一个通用的 感谢@mustafa的努力,但这不是我所期望的。我希望sumenu的动画完全像这样()。我不希望他们被动画作为一个弹出窗口,因为页面变得更加混乱。谢谢你的努力@mohammed。我可以得到它的源代码吗?在我的代码中,我可以在哪里进行编辑以使它像您提到的示例那样发生?我提到的示例创建了一个动态的通用菜单列表项,可以在需要时重复使用。正是这个组件:请稍候,我将给出单个项目的解决方案很高兴我提供了帮助,好的,没有问题很好,您提供了用于编辑stackblitz项目的链接。无法从您在回答中提供的链接中获取来源您能给我一个工作示例吗?我认为它缺少服务和路由器属性。我使用了上面的方法,并以此为例,尝试在代码中实现相同的功能。它不起作用。我再次更新了问题,使之更加具体。感谢@mohamedit马上就到了,在你的帮助下,我完全修复了它。感谢@mohamedwhen我尝试将嵌套菜单添加到多个菜单中。我点击了一个下拉菜单,所有的东西都打开了。有解决办法吗@穆罕默德