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

Question

角度材质项目提供了菜单组件overview，API和示例。如果鼠标结束，我想改进一个自动下拉列表。所以我的更改（如材料文档中所述）：

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();
  }

}

问题1

是否有可能不在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>