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

这也是答案，可以帮助您解决问题。

Bootstrap dropdown with Angular 6

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下拉菜单不起作用

3 个答案: