angular5通过自定义指令实现hover效果的问题

Question

我通过指令实现了一个简单的导航条hover效果，效果如下：

可以看到，当指针位于短横线的时候触发了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>
...

Answer 1

是不是可以把线跟文字置于同一个容器中，不要加在外面？ 如导航item的border-bottom