如何在 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 以上）。

这里是 link : 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 中使用 bootstrap 下拉菜单，您需要添加两个 classes - 一个 show class 在父下拉菜单中，即下拉菜单和另一个 show class 在其子下拉菜单中。

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

自定义下拉指令方法：

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');
    }
  }

}

现在在模板中将此附加到 bootstrap 下拉列表：

<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 下拉列表，对于 Boostrap 3，您需要确定需要附加的 classes。它必须 open class 仅在父级别上。

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

How to use Bootstrap drop down in Angular2 application?

bootstrapping

typescript

dropdown

angular