Question

我使用标准的Angular2材质菜单结构创建一个顶部栏菜单项，打开子菜单，如下面的代码来自我的项目：

<button mat-button matTooltip="Events..." matTooltipPosition="below" [mat-menu-trigger-for]="eventsMenu">
    <span hide-xs hide-gt-xs show-gt-sm>EVENTS</span>
    <mat-icon>event</mat-icon>
</button>

<mat-menu xPosition="after" yPosition="below" #eventsMenu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>
        <mat-icon>menu</mat-icon>
        <span>Agenda</span>
    </button>
    <button mat-menu-item>
        <mat-icon>menu</mat-icon>
        <span>Find Events</span>
    </button>
    ...

让我对这些子菜单感到困扰的是：

他们不会在鼠标悬停时打开;
当我点击其他主菜单项时，我们不会关闭（我必须在子菜单容器外面点击，它会隐藏，然后我可以点击其他菜单项）;
即使在子菜单隐藏之后，主菜单点击的项目也会聚焦背景（我认为这是因为我使用了<button>标签）。

我是Angular的新手，只是我使用Angular Material的第二个项目。谁能告诉我怎么能卖掉这些情况呢？

忘记提及：我正在使用Teradata Covalent模板，如果这改变了什么......

Answer 1

要在悬停时打开菜单，请使用MatMenuTrigger对象：

<button mat-button [mat-menu-trigger-for]="eventsMenu" #menuTrigger="matMenuTrigger" (mouseover)="menuTrigger.openMenu()">

单击菜单按钮时会获得焦点。菜单关闭时，焦点将返回最后一个组件，即菜单按钮。这个是正常的。您可以通过监听菜单关闭事件并将焦点发送到其他事件来解决这个问题。

关闭问题很困难。有一个关于here的建议。

您可以在mat菜单中将div添加到水平布局菜单项，但问题是子菜单打开到不在下面的按钮右侧，因此您需要调整xPosition和yPosition。此外，您需要找到一种方法来打开顶级菜单，因为它们默认关闭。下面是一种方法（可能有更好的方法）。

HTML

<!-- hidden button for opening the menu -->
<button mat-button [matMenuTriggerFor]="mainMenu" #mainMenuTrigger="matMenuTrigger" class="cdk-visually-hidden">
</button>

<!-- horizontal main menu -->
<mat-menu #mainMenu="matMenu">
  <div style="display: flex; justify-content: flex-start;">
    <button mat-button [matMenuTriggerFor]="file">File</button>
    <button mat-button [matMenuTriggerFor]="edit">Edit</button>
  </div>
</mat-menu>

<!-- submenus below -->

TS

import {Component, ViewChild} from '@angular/core';
import {MatMenuTrigger} from '@angular/material';
/**
 * @title Horizontal menu
 */
@Component({
  selector: 'horizontal-menu-example',
  templateUrl: 'horizontal-menu-example.html'
})
export class HorizontalMenuExample {
  @ViewChild('mainMenuTrigger') trigger: MatMenuTrigger;
  ngAfterViewInit() {
    setTimeout(() => {
      this.trigger.openMenu(); // open the main menu
    }, 0);
  }
}

Angular2 +材质菜单不像菜单

1 个答案: