Angular2 获取对在 ngFor 中创建的 Material MdMenu 的引用答案

【问题标题】：Angular2 Get reference to Material MdMenu created in ngForAngular2 获取对在 ngFor 中创建的 Material MdMenu 的引用
【发布时间】：2017-09-27 14:31:54
【问题描述】：

我想要完成的事情

我正在尝试使用角度和材质组件动态创建 2 级级联菜单。

第一层由 md-nav-list 和一堆
组成 md-list-items 包含使用 ngFor 创建的按钮
二级菜单是带有按钮的 md 菜单。 md-menu 按钮是使用嵌套生成的

现在，我想在悬停在第一级元素上时触发第二级菜单。

  ...

  // Level 1 Menu
  <button class="cq-but" md-menu-item *ngIf="item.type === 'sub'"
    [mdMenuTriggerFor]= ... // <- how do I reference mdMenu here??
     item.name
  </button>

  // Level 2 Menu
  <md-menu class="cq-popup" *ngIf="item.type === 'sub'" #subMenu="mdMenu" id=item.name>
    <button md-menu-item *ngFor="let childitem of item.children">
        childitem.name
    </button>
  </md-menu>


</md-list-item>

我需要什么帮助

动态生成的 md 菜单需要通过一级按钮中的 [mdMenuTriggerFor] 触发。

正如我在上面的代码 sn-p 中所指出的，我的问题是……如何在我的 mdMenuTriggerFor 指令中绑定到动态生成的 md-menu 组件？

**我尝试过的** - 我尝试使用 ViewChildren 获取对子菜单的引用，即

// @ViewChildren('subMenu') public subMenu:QueryList<MdMenu>;

希望以编程方式触发菜单，而无需在模板中提供 mdMenuTriggerFor 指令。但是这不起作用，因为根据https://material.angular.io/components/component/menu，mdMenuTriggerFor 指令对于将菜单附加到 DOM 中的触发器元素是必要的

对其他方法持开放态度。谢谢！

【问题讨论】：

Vijay，你有什么成功的方法吗？我正在做一个项目，我即将面临类似的情况（事实上我刚刚在这里发布了一个关于它的问题）。我在想什么：将触发器和md-menu封装在一个组件中（模板引用变量是组件范围的，所以不会有冲突）并通过使用单向数据绑定将必要的参数传递给这个组件。在巴西有点晚了，但我打算明天试试。
成功了，维杰。看看我对自己问题的回答：https://stackoverflow.com/a/44192485/6433166
感谢 jpavel。我可以确认这种方法对我有用。即使使用材料 2.0.0-beta.12，我们也无法将 [matMenuTriggerFor] - 以前的 [mdMenuTriggerFor] 关联到 matMenu 的动态引用。像您建议的那样封装触发器和 mat-menu 就可以了。
Vlay，我在下面的答案中提出了另一种方法。

标签： angular angular-material

【解决方案1】：

这是一种方法：您可以使用 <ng-container>，它只会为您的模板变量 (https://stackblitz.com/edit/repeating-menu-approach-2) 创建一个私有范围：

<table class="table table-striped">
  <ng-container *ngFor="let el of [1,2,3,4,5]">
    <tr>
      <td>Text line of menu {{el}}</td>
      <td style="width: 5%">
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</md-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="clickHandler('Item 1 of Menu ' + el)">Menu {{el}}:Item 1</button>
          <button mat-menu-item (click)="clickHandler('Item 2 of Menu ' + el)">Menu {{el}}:Item 2</button>
        </mat-menu>
      </td>
    </tr>
  </ng-container>
</table>

有趣的是，上面的每个 #menu 模板变量都是唯一的，并且成功地与由*ngFor 循环创建的其他 #menu 模板变量隔离。 p>

【讨论】：