Как показать угловой материал, выпадающий при наведении мыши?

Question

Теперь при нажатии на меню гамбургера я получаю выпадающий список, вместо этого он мне нужен при наведении курсора мыши на меню гамбургера, здесь находится стек блиц ссылка .

Answer 1

переопределить mouseover событие и создать справочную переменную #menuTrigger. это решит вашу проблему.

  <button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" 
  (mouseover)="menuTrigger.openMenu()" >

Я обновил ваш stackblitz

Answer 2

MatMenuTrigger

Эта директива предназначена для использования вместе с тегом mat-menu.Он отвечает за переключение отображения предоставленного экземпляра меню.

<button #r="matMenuTrigger" mat-icon-button [matMenuTriggerFor]="menu" >
      <mat-icon (mouseover)="open(r)"  >menu</mat-icon>
</button>

Пример: https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v

Answer 3

Надеюсь, это поможет

функция использования (mouseenter) Радиально-парить-stackblitz

Answer 4

Вы можете сделать это, используя matMenuTrigger Директиву

<button mat-icon-button [matMenuTriggerFor]="menu" 
    #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">

Чтобы скрыть меню, добавьте событие mouseleave для меню.

Объедините все свои пункты меню в теге span или div. А затем прикрепите к нему (mouseleave) событие

<mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span (mouseleave)="menuTrigger.closeMenu()">
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
        ........
       <mat-icon>exit_to_app</mat-icon>
       <span>Logout</span>
     </button>
    </span>
</mat-menu>

Разветвленная ДЕМО

Answer 5

app.component.html:

<mat-toolbar color="primary" >
  <span class="fill-remaining-space">
    <button #clickMe mat-icon-button [matMenuTriggerFor]="menu" (mouseenter)="clickOnHover()">
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </button>
      <button mat-menu-item>
        <mat-icon>people_outline</mat-icon>
        <span>Connecting</span>
      </button>
      <button mat-menu-item>
        <mat-icon>videocam</mat-icon>
        <span>Let's talk</span>
      </button>
      <button mat-menu-item>
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </button>
    </mat-menu>
  </span>
  <span class="fill-remaining-space">Application Title</span>
</mat-toolbar>

app.component.ts:

import { Component, ViewChild } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('clickMe') clickMe: any;

  clickOnHover() {
    this.clickMe._elementRef.nativeElement.click();
  }

}

Answer 6

Добавьте опорную переменную для кнопки циновки, используйте для запуска click в событии mouseover.

<button mat-icon-button
        #matBtn
        (mouseover)="matBtn._elementRef.nativeElement.click()"
        [matMenuTriggerFor]="menu"
>

Примечание: я действительно не предпочитаю обращаться к "частным" свойствам объекта, подобного этому, это мое решение - скорее обходной путь, пожалуйста, используйте его, если вы не найдете ничего другого.