Bootstrap 4 下拉菜单在 Angular 6 中不起作用答案

【问题标题】：Bootstrap 4 dropdown doesn't work in Angular 6Bootstrap 4 下拉菜单在 Angular 6 中不起作用
【发布时间】：2019-03-09 08:46:42
【问题描述】：

我写了一个指令来实现一个按钮的下拉功能。它适用于 Bootstrap 3，但不适用于 Bootstrap 4。

这是 HTML 代码：

<div class="row">
  <div class="col-xs-12">
    <div class="btn-group" appDropdown>
      <button class="btn btn-primary dropdown-toggle"
      >Dropdown Menu<span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a>items1</a></li>
        <li><a>items2</a></li>
      </ul>
    </div>
  </div>
</div>

这是指令文件中的代码：

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

@Directive ({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen = false;
  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

【问题讨论】：

标签： angular twitter-bootstrap twitter-bootstrap-3 bootstrap-4 angular6

【解决方案1】：

如果你不介意使用ngx-bootstrap，你可以这样做。

您需要拥有的依赖项列表，

bootstrap、jquery、ngx-bootstrap 和 popper.js

示例

app.component.html

<div class="btn-group" dropdown>
<button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
        aria-controls="dropdown-basic">
  Button dropdown <span class="caret"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
    role="menu" aria-labelledby="button-basic">
  <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>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports:      [ BrowserModule, FormsModule, BsDropdownModule.forRoot() ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

package.json（仅提取依赖项）

"dependencies": {
    "@angular/common": "^6.1.9",
    "@angular/compiler": "^6.1.9",
    "@angular/core": "^6.1.9",
    "@angular/forms": "^6.1.9",
    "@angular/platform-browser": "^6.1.9",
    "@angular/platform-browser-dynamic": "^6.1.9",
    "@angular/router": "^6.1.9",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.7",
    "jquery": "1.9.1 - 3",
    "ngx-bootstrap": "^3.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
}

angular.json（提取的样式和脚本）

"projects": {
    "demo": {      
      "architect": {
        "build": {          
          "options": {            
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",              
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          }
        }
    }
  }
}

链接到 StackBlitz

https://stackblitz.com/edit/angular6-bootstrap4-dropdown

我希望这会有所帮助。谢谢。

【讨论】：