angular-material2 – 在mat-menu中使用mat-accordion的奇怪行为
发布时间:2020-12-17 17:11:00 所属栏目:安全 来源:网络整理
导读:我在mat-menu中创建了一个带有mat-accordion的页面,我遇到了两个问题. 首先,当我第一次打开菜单时,其中的所有手风琴都是打开的,即使所有这些手风琴的aria-expanded都设置为false.点击手风琴后,然后正确打开,再次点击它会移动到关闭状态并返回正确的功能. 第
我在mat-menu中创建了一个带有mat-accordion的页面,我遇到了两个问题.
首先,当我第一次打开菜单时,其中的所有手风琴都是打开的,即使所有这些手风琴的aria-expanded都设置为false.点击手风琴后,然后正确打开,再次点击它会移动到关闭状态并返回正确的功能. 第二个问题是,如果我将所有手风琴都置于关闭状态,然后通过单击页面上的其他位置退出菜单,然后再次单击菜单,同时菜单打开,手风琴正确关闭,但是当你走打开手风琴之一它不打开手风琴,旁边有一个奇怪的滚动条.再次,在第二次单击手风琴后,功能恢复正常. 这是我的菜单和手风琴: <button mat-button [matMenuTriggerFor]="menu" class="right-divide"> <mat-icon>menu</mat-icon> </button> <mat-menu #menu="matMenu"> <mat-accordion displayMode = "flat"> <mat-expansion-panel> <mat-expansion-panel-header (click)="stopClickPropagate($event)"> <mat-panel-title> PLANNING </mat-panel-title> </mat-expansion-panel-header> <button mat-menu-item>VIEW GOALS</button> <button mat-menu-item>EDIT GOALS</button> <button mat-menu-item>ADD A NEW GOAL</button> <button mat-menu-item>MAKE SCENARIO DECISIONS</button> <button mat-menu-item>BUILD OPTIONS</button> </mat-expansion-panel> <mat-expansion-panel> <mat-expansion-panel-header (click)="stopClickPropagate($event)"> <mat-panel-title> BUDGET </mat-panel-title> </mat-expansion-panel-header> <button mat-menu-item>BASE</button> <button mat-menu-item>MODIFICATIONS</button> <button mat-menu-item>ATTRIBUTES</button> <button mat-menu-item>WORKFLOW</button> </mat-expansion-panel> </mat-accordion> </mat-menu> 解决方法
我找到的最佳解决方案.
<mat-menu #menuRef="matMenuTrigger"> <ng-template matMenuContent> <mat-accordion *ngIf="menuRef.menuOpen"> .... </mat-accordion> </ng-template> </mat-menu> 在样式的情况下,崩溃的ng-animate被破坏,bcs height = 0 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |