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 Project。（高于版本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中使用bootstrap下拉列表，您需要添加两个类- 父下拉菜单元素中的一个 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 类。

如何在Angular2应用程序中使用Bootstrap下拉列表？

2 个答案: