角度5问题与菜单结构

Question

我正在使用angular-cli，我的菜单结构如下（ul-> li指导）：

<ul class="sub-menu">
    <li class="nav-item  ">
        <a routerLink="/logistica/contenedores" class="nav-link ">
            <span class="title">Adicionar</span>
        </a>
    </li>
</ul>

问题是当我使用routerlink时。我有一个javascript管理菜单上的事件，但我的问题是如果我可以用指令或其他东西覆盖该javascript。

routerlink适用于菜单结构之外的标签。我也实现了一个指令但是没有捕获事件，甚至没有传递给console.log：

import {AfterViewInit, Directive, ElementRef, Input, HostBinding, HostListener} from '@angular/core';

@Directive({
  selector: '[appHrefPreventDefault]',
  // host: {'(click)': 'preventDefault($event)'},
})
export class HrefPreventDefaultDirective {
  @Input() href: string;

  @HostBinding('onclick') preventDefault2(event) {
    if (this.href.length === 0 || this.href === '#') {
      event.preventDefault();
    }
    console.log('href directive');
  }

  @HostListener('onclick') preventDefault(event) {
    if (this.href.length === 0 || this.href === '#') {
      event.preventDefault();
    }
    console.log('href directive');
  }

  constructor(private el: ElementRef) {

  }

}

提前致谢！