如何在 Angular2 应用程序中使用 Bootstrap 下拉菜单？

Question

在我当前的项目中，我想添加下拉菜单，为此我从link 中获取了代码。添加下面的代码后，下拉菜单如示例中所示，但当我单击它时没有任何反应。

   <li class="dropdown">
                <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">API AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">SQL Exception</a></li>
                </ul>
            </li>

我使用了 Bootstrap 3.3.7 版，并在我的 index.cshtml

中添加了以下几行

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

如何在 Angular 2 项目中使用 Bootstrap 下拉菜单？

Answer 1

ngx-bootstrap 可用于 Angular 项目。（高于版本 2）。

这里是链接：http://valor-software.com/ngx-bootstrap/#/dropdowns

你可以在你的项目中使用它。

说明

做npm install ngx-bootstrap --save

导入下拉模块

// RECOMMENDED (doesn't work with system.js)
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// or
import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

Answer 2

要在 Angular 中使用引导下拉菜单，您需要添加两个类 - 父下拉元素中的一个 show 类，即下拉菜单和其子下拉菜单中的其他 show 类。

为此，您可以创建一个下拉组件并使用其单击处理程序将值列表作为数组传递给它，或者创建一个自定义指令。

自定义下拉指令方法：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  constructor(private el: ElementRef) { }

  //Binding click to Add show class 
  @HostListener('click') onclick() {

    var parent = this.el.nativeElement;//parent element
    parent.classList.toggle('show');
    var child = [].filter.call(this.el.nativeElement.children, function(ele) {
      return ele.classList.contains('dropdown-menu');
    }); //Identify the child element on dropdown clicked- dropdwon menu

    if(child.length) {
      child[0].classList.toggle('show');
    }
  }

}

现在在模板中将其附加到引导下拉菜单中：

<li class="nav-item dropdown" appDropdown>
   <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Username
   </a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" >Profile 2</a>
      <a class="dropdown-item" >Logout 2</a>
   </div>
 </li>

注意 - 此解决方案仅适用于 Bootstrap 4 Dropdown，对于 Boostrap 3，您需要确定需要附加的类。它必须是 open 仅父级别的类。