Question

我想要实现的目标

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

第一级由md-nav-list组成，其中包含一堆
包含使用ngFor
第二级菜单是带按钮的md菜单。 md菜单按钮使用嵌套

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

  ...

  // 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>

我需要帮助

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

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

**我试过的** - 我试图使用ViewChildren引用subMenu，即

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

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

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

Answer 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 模板变量都是唯一的，与{{1}创建的其他 #menu 模板变量成功隔离循环。

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

1 个答案: