многоуровневый выпадающий для угловых 5 - PullRequest
Новая
       5

многоуровневый выпадающий для угловых 5

0 голосов
/ 23 октября 2018

Я реализовал многоуровневый раскрывающийся список с помощью ngbdropdown.

Он работает нормально с событием щелчка, но если я хочу использовать указатель мыши и щелкнуть свойство, чтобы различить маршруты, он не работает должным образом. 

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