Предотвращение закрытия md-меню при нажатии в открытом меню в приложении Angular

Question

В моем приложении 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 от закрытия, когда я нажимаю на одну из этих кнопок в открывшемся меню?

Answer 1

Вам необходимо остановить распространение события click обратно в меню.Вы можете сделать это очень легко с помощью обработчика щелчков:

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

Хитрость заключается в применении обработчика щелчков к нужному элементу - если проблема заключается только в кнопках - примените его там.Но если все меню представляет собой проблему, примените его к базовому родительскому контейнеру (DIV).Здесь обсуждается здесь .