angular6中的下拉菜单无法正常工作答案

【问题标题】：Dropdown in angular6 for a menu not workingangular6中的下拉菜单无法正常工作
【发布时间】：2020-01-07 05:47:53
【问题描述】：

我正在尝试通过单击侧栏项打开菜单。然而，点击什么也不做。我不确定如何在 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>

【问题讨论】：

请看这个答案51013313

标签： angular bootstrap-4 angular6

【解决方案1】：

删除href

试试这样：

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

【讨论】：

【解决方案2】：

可能是你忘记导入 bootstrap js

这也是帮助您解决问题的答案。

Bootstrap dropdown with Angular 6

【讨论】：

【解决方案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>

【讨论】：

这似乎有效，但 CSS 很奇怪，无论如何谢谢。