带有 Bootstrap 4.1.3 的 Angular6 中的下拉菜单不起作用

Question

尝试在带有引导程序的角度应用程序中实现下拉菜单，但下拉菜单的布局出现问题。下拉菜单在按钮左侧打开，而不是真正的下拉菜单。此外，完整的导航栏获得了新的高度。

我的 HTML 如下所示：

HTML

    <div class="btn-group" >
      <button
        type="button class="
        btn btn-success dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">Login
      </button>
      <div  *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

panelExpanded 只是 .ts 文件中的布尔值。

我尝试了两种建议的解决方案，但到目前为止都没有奏效：

1. 添加class="dropdown-menu"
2. 安装引导程序（见下文）

在 angular.json 中添加以下 import-statement 后，它仍然不起作用：

"node_modules/bootstrap/dist/css/bootstrap.css",

另外我安装了 ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

和引导

npm i --save bootstrap

我收到以下消息：

bootstrap@4.1.3 requires a peer of jquery@1.9.1

bootstrap@4.1.3 requires a peer of popper.js@^1.14.3

我也必须安装这两个软件包吗？

我也尝试在 angular.json 中包含 ng-bootstrap-script，但仍然没有成功

"scripts": [
  "node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js",
]

提前感谢您的任何反馈。

Answer 1

可能的解决方案：-

添加：-class="dropdown-menu"

链接：-https://stackblitz.com/edit/angular-stqy1h?file=src/app/app.component.html

<div class="btn-group" >
      <button type="button" class="btn btn-success dropdown-toggle"  data-toggle="dropdown" 
      aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">
        Login
      </button>
      <div   class="dropdown-menu" *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

正如上面 Nizet 所建议的，你也可以使用@ng-bootstrap。

为此：-

1) npm install --save @ng-bootstrap/ng-bootstrap
2) npm i --save bootstrap

angular.json:-

"node_modules/bootstrap/dist/bootstrap.min.css"

或：-

1) npm install --save @ng-bootstrap/ng-bootstrap

2) import bootstrap style sheet file, into root style.css as below:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'; 

对于使用 ng-bootstrap，使用 ng-bootstrap 时不需要 jquery.js、tether.js 或 bootstrap.js。 ng-bottstrap 库是用原生 Angular 2+ 代码替换这些脚本。

请访问https://ng-bootstrap.github.io/#/home

Answer 2

问题解决了。

这将是标题的 HTML。

<nav class="navbar navbar-light bg-light mb-5 fixed-top">
      <a class="navbar-brand" href="#">Title</a>
        <div class="navbar-expand mr-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link" routerLink="/dashboard">Main Page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/about">About</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-expand ml-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Login</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="/signin">My Profile</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="/signup">Register</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

在index.html 中我添加了这些脚本。

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 3

引导程序 - 4.4.1， Angular-cli：7.3.9

Javascript 文件，npm 模块需要将 js 文件发送到客户端，所以你需要告诉流星你想要它。

最简单的方法是在客户端入口点导入 js 包：

import 'bootstrap/dist/js/bootstrap.bundle'; 行到“polyfills.ts”文件中