代码之家  ›  专栏  ›  技术社区  ›  Muirik

在Angular应用程序中单击打开的菜单时阻止MD菜单关闭

  •  1
  • Muirik  · 技术社区  · 6 年前

    在我的Angular应用程序中,我使用MD图标作为触发器打开MD菜单。这按预期工作。

    现在,在那个打开的菜单中,我还有另外两个按钮,我想用它们来触发不同的菜单项,以显示在原来的打开的下拉菜单中。

    现在的问题是,每当我在打开的菜单中单击任何地方,都会导致菜单关闭。我的问题是,在这种情况下,我如何保持MD菜单打开,以便我可以单击“打开”菜单中的其他按钮来进一步筛选菜单选项?

    这是我的代码:

    <button [mdMenuTriggerFor]="menu" md-button class="right-btn md-button">
        <md-icon class="arrow-center-align">arrow_drop_down</md-icon>
    
        <md-menu #menu="mdMenu">
            <ng-container>
    
                <div class="left-menu-header">
                    <button md-button class="menu-load" (click)="displayStandardStages()">Standard</button>
                </div>
                <div class="right-menu-header">
                    <button md-button class="menu-load"(click)="displayExtraStages()">Extra</button>
                </div>
    
                <ng-container *ngIf="!isOpenStage()">
                    <ng-container *ngFor="let stage of openStages">
                        <ng-container *ngIf="selectedService?.stage?.stage !== stage.stage">
                            <button md-menu-item (click)="moveRecord(stage)">
                                <span class="md-menu-text capitalize">{{ stage.stage }}</span>
                            </button>
                        </ng-container>
                    </ng-container>
                </ng-container>
    
            </ng-container>
        </md-menu>
    </button>
    

    这是代码的一部分,包含打开菜单中的按钮:

    <div class="left-menu-header">
        <button md-button class="menu-load" (click)="displayStandardStages()">Standard</button>
    </div>
    <div class="right-menu-header">
        <button md-button class="menu-load" (click)="displayExtraStages()">Extra</button>
    </div>
    

    当我单击已打开菜单中的其中一个按钮时,如何阻止已打开的MDMENU关闭?

    1 回复  |  直到 6 年前
        1
  •  2
  •   G. Tranter    6 年前

    您需要停止Click事件传播回菜单。使用单击处理程序可以很容易地做到这一点:

    (click)="$event.stopPropagation()"
    

    诀窍是将单击处理程序应用到正确的元素上——如果问题在于按钮——那么就在那里应用它。但如果整个菜单有问题,请将其应用于基本父容器(DIV)。有人在讨论这个问题 here .