从控制器关闭角度材质菜单答案

【问题标题】：Close angular material menu from controler从控制器关闭角度材质菜单
【发布时间】：2017-08-17 12:14:26
【问题描述】：

这听起来可能有点奇怪，但我无法从我的控制器关闭 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

我的代码有什么问题？

【问题讨论】：

它曾经存在 closeMenu() 吗？
如果你颠倒代码中的情况，openMenu() 是否有效？
或替换为 (click)="setColor($event, 'white'); paletteMenu.closeMenu()" 并从 setColor() 中移除
这是为了调试目的......
设置一个plunker，我会尝试修复它

标签： angular angular-material2

【解决方案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

【讨论】：

它正在工作！谢谢！文档对此并不太清楚.. 至少对我而言。