从控制器关闭 angular material 菜单

Question

这听起来可能有点奇怪，但我无法从我的控制器关闭 Angular Material 菜单。

按钮打开菜单：

<md-icon class="add-note__icon" [mdMenuTriggerFor]="paletteMenu">
    palette
</md-icon>

菜单：

<md-menu #paletteMenu="mdMenu">
  <div
    (click)="setColor($event, 'white')"
    mdTooltip="White"
  ></div>
  ...
</md-menu>

在我的控制器中我有一个对我的菜单的引用：

@ViewChild('paletteMenu') menu: any;

以及应该关闭它的函数：

setColor(event, color) {
  event.stopPropagation();
  this.menu.closeMenu();
}

每次单击其中一个选项时，我都会收到错误消息：

TypeError: this.menu.closeMenu is not a function

我的代码有什么问题？

Answer 1

closeMenu() 是 MdMenuTrigger 的函数，而不是 MdMenu，这就是发生该错误的原因。在您的图标中为 mdMenuTrigger 创建一个引用，并在组件代码中使用它。

html:

<md-icon class="add-note__icon"
         #paletteMenuTrigger="mdMenuTrigger"
         [mdMenuTriggerFor]="paletteMenu">
    palette
</md-icon>

ts:

export class SelectFormExample {

  @ViewChild('paletteMenuTrigger') menu: any;

  setColor(event, color) {
    event.stopPropagation();
    this.menu.closeMenu();
  }
}

Plunker demo

从控制器关闭 angular material 菜单

Close angular material menu from controler

angular-material2

angular