twitter-bootstrap - Angular 2下拉列表中的bootstrap 4不起作用

Question

我按照以下步骤将 bootstrap 4 安装到我的 Angular 2 项目中:Accepted Answer, following the first 1,2,3 and 4 steps

然而，当我将以下 HTML 添加到我的 header 组件时:

<nav class="navbar-dark bg-inverse">
<div class="container">
    <a href="#" class="navbar-brand"></a>
    <ul class="nav navbar-nav float-xs-right">
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SomeEmail@hotmail.com</a>
            <div class="dropdown-menu" aria-labelledby="nav-dropdown">
                <a href="#" class="dropdown-item">Sign Out</a>
            </div>
        </li>
    </ul>
</div>

如您所见，它基本上是一个下拉菜单，当我单击下拉菜单时，页面会刷新，而不是显示“退出”选项。

这是我的 angular-cli.json 样式部分:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],    

在我的 Angular 2 模块中:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

然后我将 NgbModule 导入导入部分。

我显然错过了一些东西，有人可以阐明它到底是什么吗？

Answer 1

1. 请通过此链接安装 ng-bootstrap Getting Started使用以下命令:

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

2. 在 app.module.ts 上导入它，例如

   import `{NgbModule} from '@ng-bootstrap/ng-bootstrap';` 
   

3. 导入于

   imports:[
      NgbModule.forRoot(),
   ]
   

4. 在下拉菜单上添加ngbDropdown

5. 在下拉切换 DOM 上添加 ngbDropdownToggle

6. 在下拉菜单 DOM 上添加 ngbDropdownMenu

               <li ngbDropdown  class="nav-item dropdown" >
                   <a ngbDropdownToggle class="nav-link dropdown-toggle"  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Manage
                   </a>
                   <div ngbDropdownMenu  class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                     <a class="dropdown-item" href="#">Save Data</a>
                     <a class="dropdown-item" href="#">Fetch Data</a>
   
                   </div>
                 </li>
             </ul>