angular6 中的下拉菜单不起作用

Question

我正在尝试通过单击侧边栏项目打开一个菜单。但是点击什么都不做。我不确定如何在 angular6 中解决这个问题。

<li *ngIf="mUser.role.accountant !== true" class="nav-item dropdown" routerLinkActive="open">
  <a class="dropdown-toggle" href="javascript:void(0);">
    <span class="icon-holder">
      <i class="ti-server"></i>
    </span>
    <span class="title">Food/Drink</span>
    <span class="arrow">
      <i class="ti-angle-right"></i>
    </span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="" [routerLink]="['/drink']">Drinks</a>
    </li>
    <li>
      <a href="" [routerLink]="['/food']">Food</a>
    </li>
  </ul>
</li>

Answer 1

删除href

这样试试：

<a [routerLink]="['/drink']">Drinks</a>

Answer 2

可能是你忘记导入 bootstrap js

此外，这是可以帮助您解决问题的答案。

Answer 3

尝试添加 ngbDropdownToggle、ngbDropdownMenu 属性和类:

<li *ngIf="mUser.role.accountant !== true" class="nav-item dropdown" ngbDropdown>
  <a class="nav-link dropdown-toggle" ngbDropdownToggle>
    <span class="icon-holder">
      <i class="ti-server"></i>
    </span>
    <span class="title">Food/Drink</span>
    <span class="arrow">
      <i class="ti-angle-right"></i>
    </span>
  </a>
  <ul ngbDropdownMenu class="dropdown-menu"
      aria-labelledby="navbarDropdown">
    <li class="dropdown-item">
      <a [routerLink]="['/drink']">Drinks</a>
    </li>
    <li class="dropdown-item">
      <a [routerLink]="['/food']">Food</a>
    </li>
  </ul>
</li>

angular6 中的下拉菜单不起作用

Dropdown in angular6 for a menu not working

bootstrap-4

angular

angular6