Angular中设置想要达到元素hover效果的API

背景： 最近项目中遇到需要设计导航栏的菜单，移动到某一导航标签时，需要显示一个隐藏的TAG。参考了一下淘宝导航栏的设计，发现他们也是使用水平方向的ul，在每个li里嵌入div来布局。

项目需求 是在移动到某个img时候，触发一个向下的子菜单区域，所以我的思路是：
将img和子菜单区域的div外层套一个container，对container进行hover操作。

方法： 在Angular4中就有了(mouseenter) 和 (mouseleave) 两个event去控制元素hover的事件。

`

html: 
                <div class="nav-menu-bd" (mouseenter)="changeAuth()" (mouseleave)="setDefaultAuth()">
                   <img class="options" src="assets/images/menus.png" style="height: 25px;" />
                   <div class="nav-menu-bd-wrap" *ngIf="isAdmin">
                     <a [routerLink]="[ '/admin/MachineConfiguration' ]">machine card</a>
                   </div> 
                </div>
               </div>

ts:

isAdmin:boolean;
  constructor(){
    this.setDefaultAuth();
  }
  setDefaultAuth(){
    this.isAdmin = false;
  }

  changeAuth(){
    this.isAdmin=true;
  }

component里设置了isAdmin 属性来控制显示向下的子菜单区域，set和change两个func分别在mouseenter和mouseleave时触发。

(mouseenter) == hover 本元素（不包括子元素）

(mouseleave) == hover 离开元素时