Угловой (2+?) Проверен на 8, Мат-меню «Открыть и закрыть материал» при наведении [РЕШЕНИЕ] - PullRequest
Новая
       45

Угловой (2+?) Проверен на 8, Мат-меню «Открыть и закрыть материал» при наведении [РЕШЕНИЕ]

1 голос
/ 14 октября 2019

Я много раз искал, пытаясь найти чистый способ наведения меню материала, чтобы показать его пункты меню, но, к сожалению, решения, которые я нашел, казались слишком сложными, или просто прямо не работали,Поэтому вместо этого я создал собственное решение, используя части того, что нашел, и добавил некоторую собственную логику. Вы можете найти ответ ниже!

1 Ответ

1 голос
/ 14 октября 2019

Вот стэкблиц: https://stackblitz.com/edit/angular-d56h4m

Что касается объяснения, я просто добавил некоторую дополнительную логику для слушателей (mouseenter) и (mouseleave), которые просто проверяют, действительно ли мышь покинула кнопку главного меню. или пункты меню еще с очень небольшой задержкой. Это просто простая версия, но я уверен, что вы можете расширить ее по мере необходимости.

app.component.html: 

<button 
  mat-button [matMenuTriggerFor]="menu" 
  #menuTrigger="matMenuTrigger" 
  (mouseenter)="openResourceMenu(); recheckIfInMenu = true" 
  (mouseleave)="closeResourceMenu(); recheckIfInMenu = false"> Resources
</button>

<mat-menu #menu="matMenu" [overlapTrigger]="false">
  <span 
  (mouseenter)="recheckIfInMenu = true" 
  (mouseleave)="closeResourceMenu(); recheckIfInMenu = false">
    <button mat-menu-item>
      Buyers
    </button>
    <button mat-menu-item>
      Sellers
    </button>
  </span>
</mat-menu>

app.component.ts: 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
  recheckIfInMenu: boolean;

  ngOnInit() {
    this.recheckIfInMenu = false;
  }

  openResourceMenu() {
    this.trigger.openMenu();
  }

  closeResourceMenu() {
    setTimeout(() => {
      if (this.recheckIfInMenu === false) {
        this.trigger.closeMenu();
      }
    }, 175);
  }

}

styles.css: 

.cdk-overlay-container{
    top:67px;
}
.cdk-overlay-connected-position-bounding-box{
    top:0 !important;

}

Донне забудьте также импортировать модуль меню! 

import { MatMenuModule } from '@angular/material/menu';

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

Другие ссылки, которые привели меня на этот путь:

Какоткрывать и закрывать меню угловых матов при наведении

Как сделать так, чтобы меню дизайна материалов (mat-menu) скрывалось при отпускании мыши

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

...