angular - Material Angular 4.制作自动下拉菜单

Question

Angular Material 项目提供菜单组件overview 、API 和示例。如果鼠标结束，我想改进一个自动下拉菜单。所以我的更改是(如 Material 文档中所述):

menu-overview-example.html

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="someMethod()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item >User</button>
  <button mat-menu-item >Cards</button>
  <button mat-menu-item >About</button>
</mat-menu>

对应的ts文件是menu-overview-example.ts:

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

import { MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})
export class MenuOverviewExample {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

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

}

问题一

是否可以不在menu-overview-example.ts中实现方法来处理触发器，而是在menu-overview-example.html中提供相应的方法调用？例如(我不知道访问事件的正确指令):

<button mat-button-touggle aria-label="Open menu with custom trigger"
   [matMenuTriggerFor]="menu" (mouseenter)="#menu.openMenu()">

问题2

如果我的鼠标悬停在菜单上，它会打开 - 看起来不错。但是我有副作用，我的第一个菜单项变成灰色。能否正确处理？

更多详情

测试项目可访问here .

Answer 1

可能是，我回答晚了。是的，可以不在 menu-overview-example.ts 中实现句柄触发器的方法。您只能在 html 中创建菜单，它在 mouseenter 上打开菜单并在鼠标离开时关闭。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app1';
}

<div id="menu">
  <mat-toolbar color="primary">
      <mat-toolbar-row>
          <span>Application</span>
          <ng-template ngIf="true">
            <button mat-button [matMenuTriggerFor]="menu"
            #matMenuTrigger="matMenuTrigger" 
            (mouseenter)="matMenuTrigger.openMenu()" 
            >Menu</button>
            <mat-menu #menu="matMenu"   [overlapTrigger]="false">
              <div (mouseleave)="matMenuTrigger.closeMenu()">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
                <button mat-menu-item>Item 3</button>
                <button mat-menu-item>Item 4</button>
                <button mat-menu-item>Item 5</button>
              </div>
            </mat-menu>
          </ng-template>
          <ng-template ngIf="true">
            <button mat-button [matMenuTriggerFor]="menu1"
            #matMenuTrigger="matMenuTrigger" 
            (mouseenter)="matMenuTrigger.openMenu()" 
            >Menu1</button>
            <mat-menu #menu1="matMenu"  [overlapTrigger]="false">
              <div (mouseleave)="matMenuTrigger.closeMenu()">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
              </div>
            </mat-menu>
          </ng-template>
          <span class="example-spacer"></span>
          <mat-icon class="example-icon">favorite</mat-icon>
          <mat-icon class="example-icon">delete</mat-icon>
        </mat-toolbar-row>
    </mat-toolbar>
</div>