for循环中的Mat-menu：性能问题

Question

我想在 Angular 中使用 Material 的 mat-menu 作为下拉指令，并找到了一种操作它的方法，以便满足我们应用程序的需求（请参阅此处的相关问题：Override Angular Material Component）

现在我将 mat-menu 集成到我们的组件中。但菜单打开和关闭非常缓慢。可能与mat-menu在for循环的子组件内的问题有关，所以会生成很多mat-menu。

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

第一个“测试测试”是一个垫子菜单，它不在 for 循环内。在这里，它会在合理的时间打开和关闭。

“bla bla”菜单位于循环内。当您单击它们时，您会看到有时开头的垫子菜单也会打开，而要关闭菜单，您需要单击两次。我认为发生这种情况是因为您需要单击以关闭每个菜单。

现在我认为这是因为每个菜单都有相同的模板名称（尽管我读到当 mat-menu 在循环内时这不是问题，因为每个菜单都有自己的范围）。

我还尝试使用 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>