在Angular应用程序中打开的菜单中单击时防止md-menu关闭答案

【问题标题】：Preventing md-menu from closing when clicking within opened menu in Angular app在Angular应用程序中打开的菜单中单击时防止md-menu关闭
【发布时间】：2018-11-30 04:01:41
【问题描述】：

在我的 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 关闭？

【问题讨论】：

标签： javascript angular angular-material

【解决方案1】：

您需要阻止点击事件传播回菜单。您可以使用点击处理程序非常轻松地做到这一点：

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

诀窍在于将点击处理程序应用到正确的元素 - 如果只是按钮问题 - 将其应用到那里。但如果整个菜单有问题，请将其应用到基本父容器 (DIV)。有一个关于here的讨论。

【讨论】：