angular5通過自定義指令實現(xiàn)hover效果的問題

我通過指令實現(xiàn)了一個簡單的導航條hover效果，效果如下：

可以看到，當指針位于短橫線的時候觸發(fā)了mouseLeave事件，求問該如何阻止它。

nav-hover.directive.ts:

@Directive({
  selector: '[appNavHover]'
})
export class NavHoverDirective {
  constructor(private el: ElementRef) { }

  @Input('appNavHover') index: number;

  @Input() active: HTMLElement;

  @HostListener('mouseenter', ['$event']) onMouseEnter(e) {
    this.setActiveLine();
  }

  @HostListener('mouseleave', ['$event']) onMouseLeave(e) {
    const index = this.getActived();

    this.setActiveLine(index);
  }

// 設置短橫線位置
private setActiveLine(index = this.index) {...}

// 鼠標離開恢復active位置
private getActived(): number {...}

}

app.component.html

...
<nav class="col-5 col-offset-1 header-item clearfix" #navWrap>
  <a class="block pull-left"
     *ngFor="let nav of navData; let i = index; let last = last;"
     [routerLink]="nav.link"
     routerLinkActive="active"
     [routerLinkActiveOptions]="{ exact: nav.link === '/' ? true : false }"
     [appNavHover]="i"
     [active]="activeLine">
    {{ nav.name }} {{ last ? forRendered(activeLine, navWrap) : '' }}
  </a>
  <i class="center-block active-line animated" #activeLine></i>
</nav>
...