在angular2中实现子菜单

Question

I have a menu in my webApp and I wanna add a submenu.for implement that feature I need to attach click event to the a tag with has-sub class for every single menu. how can I achieve that? I should add (click) event to the all of a tag. or there's better solution?

What should I put in javascript side of that component?

Thanks

<ul>
    <li><a>test</a></li>
    <li>
      <a class="has-sub">test<icon name="plus" size="5"></icon></a>
      <div class="submenu">
        <ul class="container">
          <li><a href="#">test</a></li>
          <li><a href="#">test</a></li>
          <li><a href="#">test</a></li>
          <li><a href="#">test</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
  </ul>

Answer 1

routerLink="#" is invalid.
Either make it a normal <a href="#"> (without routerLink ) or pass a registered route path like

<a routerLink="/rootRoute/childRoute"

For how to use ther router see https://angular.io/docs/ts/latest/guide/router.html

update

To add a click handler only to element with class="has-sub" you can use

<a class="has-sub" href="#" #li1 (click)="li1.classList.contains('has-sub') ? myClickHandler($event) : false"

This way myClickHandler($event) is only called when the element has class="has-sub" , otherwise $event.preventDefault() is called (because of the return value false )