时间戳

首页 > 解决方案 > 如何将 matMenuTriggerFor 动态附加到 Angular 材质菜单中的 DOM 元素？

angular - 如何将 matMenuTriggerFor 动态附加到 Angular 材质菜单中的 DOM 元素？

问题描述

在 Angular 表中添加 Angular 材质菜单时，我遇到了性能问题。具有数千行的角材料表创建了数千个垫子菜单组件。由于此页面加载时间过长。

这是我的示例代码。

    <table>
      <tr *ngFor="let el of [1,2,3,4,5]">
        <td>Text line of menu {{el}}</td>
        <td style="width: 5%">
        <button mat-icon-button [matMenuTriggerFor]="abc.menu" class="center-block">
            <i class="material-icons">more_vert</i>
        </button>

        <app-desposition #abc="menuComponent" [user]="row.policyObj"></app-desposition>
        </td>
  </tr>
</table>

这 <app-desposition>是另一个带有 mat-menu 模板的 Angular 组件。

这是模板<app-desposition>

<mat-menu #menu="matMenu" class="d-menu-container">

  <div class="desposition-menu">

    <div (click)="$event.stopPropagation()">
          <mat-input-container class="col-md-12">
              <textarea [(ngModel)]="message" matInput id="message" name="body" rows="2" placeholder="Click here to write comment"></textarea>
          </mat-input-container>
      </div>

    <mat-radio-group [(ngModel)]="selectedDesposition" (click)="$event.stopPropagation()">   

      <div mat-menu-item *ngFor="let menu of menuItems">
        <mat-radio-button class="radioText" [value]="menu.getName()">
          <span class="wrap-mat-radio-label" style="font-style:unset; font-size: 12px">{{menu.getName()}}</span>
        </mat-radio-button> 
      </div>
    </mat-radio-group>
  </div>

  <div mat-menu-item (click)="$event.stopPropagation()">
      <span *ngIf="uiStatus.getSuccess() else uiElse" style="text-color:green">{{uiStatus.getMessage()}}</span>

      <ng-template #uiElse><span style="text-color:red">{{uiStatus.getMessage()}}</span></ng-template>
  </div>

  <div mat-menu-item  (click)="$event.stopPropagation()">
    <button  mat-raised-button color="warn" style="width:100%"  (click)="onSelect()">
      SAVE
    </button>  
  </div>

</mat-menu>

我想要动态创建沉积组件（我可以这样做），但是，我不知道如何将 [matMenuTriggerFor] 附加到动态创建组件内部的菜单。

请有人帮忙？

作为参考，@jpavel 在 stackbliz 上做了与我类似的事情。这是链接。 Angular Material 2 MatMenu - 动态创建

标签： angularmaterial-design

解决方案

您可以使用 ViewChild 设置它检查此示例 https://stackblitz.com/edit/dynamic-nested-menus?file=app%2Fmenu-item%2Fmenu-item.component.html

推荐阅读