角度5的多级下拉菜单

Question

我已经使用ngbdropdown实现了多级下拉菜单。

它与click事件一起正常工作，但是如果我要使用鼠标悬停并单击该属性以区分路由，则它无法按预期工作。

onClick($event: Event) {
    if (($event.target as HTMLElement).classList.contains('dropdown-submenu-link')) {
      $event.stopPropagation();
    }
  }

.dropdown-submenu {
  position: relative;
  line-height: 10px;
  padding: .25rem 1rem;
  border-bottom: none !important;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0 !important;
  left: 100% !important;
  margin-left: .1rem !important;
  margin-right: .1rem !important;
}

<li class="nav-item dropdown" ngbDropdown>
 <a ngbDropdownToggle > label
          </a>
<div class="dropdown-menu"  (mouseover)="onClick($event)"ngbDropdownMenu >
        <li class="dropdown-submenu" ngbDropdown>
          <a (click)="onClick($event)"ngbDropdownToggle routerLink="/a" tabindex="0" class="dropdown-submenu-link nav-link dropdown-toggle">menu1</a>
          <div class="dropdown-menu" ngbDropdownMenu>
            <a class="dropdown-item" routerLink="/a" [queryParams]="{'page' : 'suba'}">suba</a>
            <a class="dropdown-item" routerLink="/a" [queryParams]="{'page' : 'subb'}">subb</a>
          </div>
        </li>
        <a class="dropdown-item" >menu2</a>
        
    </div>
    
    </li>