Javascript 在angular2中执行子菜单

我在我的webApp中有一个菜单，我想添加一个子菜单。为了实现该功能，我需要为每个菜单将单击事件附加到

a

标记，带有

has sub

类。我怎样才能做到这一点？ 我应该将

（单击）

事件添加到所有

标记中。还是有更好的解决办法

我应该在该组件的javascript端添加什么

谢谢

<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>












routerLink=“#”
无效。

或者将其设置为正常的
（不带
routerLink
）
或通过注册的路由路径，如

<a routerLink="/rootRoute/childRoute"

这样，只有当元素具有
class=“has sub”
时才会调用
myClickHandler（$event）
，否则将调用
$event.preventDefault（）
（因为返回值
false
）
，如果愿意使用第三方库，试试@JSNinja我不想使用第三方库。你有没有试着制定一个指令来实现子菜单并拥有“.has sub”选择器？我的问题是关于子菜单不是无效参数。我不认为有什么好的理由来讨论更详细的主题，只要最基本的事情还不清楚。为什么要使用
routerLink
？你想不想使用路由器？当我决定给它们添加路由时。要知道这只是测试。我将它们更改为
href
。谢谢你的回复。我更新了我的答案。每个元素都需要其唯一的模板变量
#li1
。如果使用
*ngFor
创建
，它们都可以具有相同的模板变量，因为由
*ngFor
创建的每个元素都有自己的范围。
<a class="has-sub" href="#" #li1 (click)="li1.classList.contains('has-sub') ? myClickHandler($event) : false"