Я пытаюсь создать гибкое адаптивное меню с помощью angular / material / flex.
Чтобы определить, находится ли браузер в малом режиме или нет, я использую MediaObserver, и он выдает deviceXs логическое значение, когда браузер (или мобильный) маленький.
В маленьком режиме браузера я хочу, чтобы меню было выпадающим из гамбургера, а в полном виде =
Вот его упрощенная версия:
<mat-toolbar class="sticky">
<mat-toolbar-row fxLayoutAlign="space-between center">
<div fxLayout="row">
<ng-container *ngIf="deviceXs; else mainMenuTemplate">
<button mat-icon-button [matMenuTriggerFor]="mainMenu">
<mat-icon>menu</mat-icon>
</button>
</ng-container>
</div>
</mat-toolbar-row>
</mat-toolbar>
<ng-template #mainMenuTemplate>
<button mat-menu-item [matMenuTriggerFor]="aMenu">Menu item A</button>
</ng-template>
<mat-menu #mainMenu="matMenu">
<ng-template [ngTemplateOutlet]="mainMenuTemplate"></ng-template>
</mat-menu>
<mat-menu #aMenu="matMenu">
<button mat-menu-item>A-a</button>
<button mat-menu-item>A-b</button>
</mat-menu>
Работает ааааалмот, просто я ожидаю, что он будет работать, кроме одного. В режиме XS button mat-menu-item работает иначе, когда является частью ng-template.
Вот ожидаемое нормальное поведение меню:
and here's how it behaves when part of the ng-template
странное поведение, когда часть ng-template
Не могли бы вы подсказать мне, как заставить это меню работать так, как ожидалось? Или, может быть, есть другой, более правильный подход?
Спасибо!