我正在尝试为我的有角度的应用程序创建一个嵌套的菜单项。我只有一些解决方案,其中嵌套选项会显示为弹出窗口,我希望它是一个下拉菜单,触发时我们可以选择位于其下方的菜单。
我尝试使用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)
我确实尝试使用与上述链接相同的元素,但无法正常工作。我可能犯了一个非常愚蠢的错误。在此先感谢!!
答案 0 :(得分:0)
您可以实现通用菜单列表项, 这是一个示例:
答案 1 :(得分:0)
根据角度材料
<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>
答案 2 :(得分:0)
根据您的代码
<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>
但是,这在实践中不好,如果您有很多嵌套,在这种情况下,请使用通用嵌套。