Question

我想使用Angular中的Material菜单作为下拉指令，并找到一种方法来操作它，以便它符合我们应用程序的需要（参见相关问题：Override Angular Material Component）

现在我将mat-menu集成到我们的组件中。但菜单打开和关闭非常缓慢。它可能与mat菜单位于for循环的子组件内部的问题有关，因此将生成许多mat菜单。

我创建了一个stackblitz来显示问题：https://stackblitz.com/edit/angular-uzlezn-nh7dbu?file=app/menu-icons-example.html

第一个'测试测试'是一个mat-menu，它不在for循环中。它在合理的时间打开和关闭。

'bla bla'mat-menus菜单在循环内。当你点击它们时，你会看到有时开头的菜单也会打开，关闭你需要点击两次的菜单。我认为这是因为您需要单击以关闭每个菜单。

现在我认为发生这种情况是因为每个菜单都有相同的模板名称（虽然我读到当菜单在循环中时它不是问题，因为每个菜单都有自己的范围）。

我也尝试使用ng-container围绕循环，但这也没有提高性能。

有人知道我可以做些什么来提高性能，或者可以为Angular（5）下拉列表提出不同的替代方案吗？

Answer 1

我在这里看不到任何性能问题，脚本已在几秒钟内加载并指出您的问题在第一个菜单打开时点击其他菜单，因为您不需要从任何方法打开菜单，其默认功能菜单打开选项。我已更新您的代码，请检查。从输入类型中删除somemthod函数，或者您可以执行除触发器打开之外的任何其他功能

   <span mat-icon-button #notificationMenuBtn 
    [matMenuTriggerFor]="menu1">
    test test
   </span>
   <mat-menu #menu1="matMenu" (click)="$event.stopPropagation()" 
    [xPosition]="'after'" [overlapTrigger]="false">
    <input (mouseenter)="someMethod1()" 
     (click)="$event.stopPropagation()"><button 
     (click)="$event.stopPropagation()">OK</button>
   </mat-menu>

   <div *ngFor="let i of loop">
    <span mat-icon-button #notificationMenuBtn 
     [matMenuTriggerFor]="menu">
      bla bla
    </span>
    <mat-menu #menu="matMenu" (click)="$event.stopPropagation()" 
     [xPosition]="'after'" [overlapTrigger]="false">
       <input (mouseenter)="someMethod2()" 
       (click)="$event.stopPropagation()"><button 
       (click)="$event.stopPropagation()">OK</button>
    </mat-menu>
    <br>
  </div>

for循环中的mat菜单：性能问题

1 个答案: