Question

https://stackblitz.com/edit/angular-material-hello-zhqyiy?file=app%2Fhome%2Fhome%2Fhome.component.html

我正在使用角度6进行材质设计，我想显示和隐藏，鼠标悬停时使用Mat-Menu，鼠标悬停时，我可以在鼠标悬停时显示菜单，但不能在鼠标悬停时隐藏

(mouseleave)="createPlanmenuTrigger.closeMenu()"

这是我正在使用的mouseout事件。让我知道我做错了地方

Answer 1

此处正在运行html

  <ul class="navbar-nav mr-auto">

    <li class="nav-item" routerLinkActive="active" >
      <a class="nav-link" #createPlanmenuTrigger="matMenuTrigger" 
      [matMenuTriggerFor]="createPlan" #matMenuTrigger="matMenuTrigger" 
      (mouseenter)="matMenuTrigger.openMenu()">Create Plan</a>
       <mat-menu #createPlan="matMenu">
       <div (mouseleave)="matMenuTrigger.closeMenu()">
          <button mat-menu-item [routerLink]="['/plan/manual-plan']">Manual 
         Plan</button>
        <button mat-menu-item [routerLink]="['/plan/create-plan']">Upload 
         Plan</button>
        <button mat-menu-item [routerLink]="['/plan/pending-plans']">Pending 
         Plans</button>
      </div>
      </mat-menu>

   </li>



    <li class="nav-item" routerLinkActive="active" >
      <a class="nav-link" #dispatchPlanmenuTrigger="matMenuTrigger" 
       [matMenuTriggerFor]="dispatchPlan"  #matMenuTrigger2="matMenuTrigger" 
       (mouseenter)="matMenuTrigger2.openMenu()">Dispatch Plan</a>
       <mat-menu #dispatchPlan="matMenu">
      <div (mouseleave)="matMenuTrigger2.closeMenu()">
        <button mat-menu-item [routerLink]="['/dispatch-plan/view-plan']">View 
       Plans</button>
        <button mat-menu-item [routerLink]="['/dispatch-plan/modifiy-plan']">Modify 
       Plans</button>
        <button mat-menu-item [routerLink]="['/dispatch-plan/approve-plans']">Approve 
       Plans</button>
       </div>
      </mat-menu>
     </li>

     <!-- <li class="nav-item">
      <a class="nav-link">Plant Status</a>

     </li>
     <li class="nav-item">
      <a class="nav-link">Tracking</a>
     </li> -->
</ul>

在标签上使用＃matMenuTrigger =“ matMenuTrigger”（mouseenter）=“ matMenuTrigger.openMenu（）”

将按钮包装在div标签中，然后添加到div（mouseleave）=“ matMenuTrigger.closeMenu（）”

希望它会按预期工作。

如何使用angular 6在mouseover和mouseout上显示和隐藏Mat菜单

1 个答案: