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