Angular 6的Bootstrap下拉列表

Question

我正在尝试使用Angular 6在Bootstrap导航栏中创建一个下拉项.当我在线测试时,我的代码正在运行:

<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
  <li class="nav-item dropdown" >
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

但下拉列表不适用于Angular 6.我使用以下方法来使用带Angular的Bootstrap:

ng add @ng-bootstrap/schematics

除了那个下拉项目,一切正常!

Answer 1

我之前遇到过同样的问题,我发现如下:

1. container如引导程序布局中所述,html应该与bootstrap中的类绑定
2. 下拉列表构建在第三方库中,Popper.js如Bootstrap Dropdown中所述

据我所知,你没有提到所需的javascript ie util.js, bootstrap.js, popper.js或缩小版本.

在这里,我没有做太多,只是在索引文件中引用所需的javascript文件

<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>

我根据需要创建了一个导航组件和设计,如下所示:

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div

可以在这里找到工作演示.希望这对你有所帮助.

Answer 2

我遇到了同样的bootstrap问题,但我得到了解决方案.如果您使用的是Angular 6,则无需为bootstrap添加popper.js.您需要添加bootstrap 4然后添加rxjs-compat.

npm install rxjs-compat

并添加ngx-bootstrap以执行下拉操作.安装ngx-bootstrap,

npm install ngx-bootstrap --save

现在我们需要使用以下代码在应用程序中添加ngx-bootstrap中的下拉模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   CommonModule,
   BsDropdownModule.forRoot(),
   TooltipModule.forRoot(),
   ModalModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

然后我对你的代码做了一些修改,它对我来说很好.

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
  <li class="dropdown" dropdown >
    <a dropdownToggle role="button"> <!-- {2} -->
        Page1<span class="caret"></span></a>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

Answer 3

@Rushikesh Salunke的答案很棒，但是当我看到它的时候，我已经在使用@ ng-bootstrap库，而不是ngx，这就是我从文档中找到的。

首先，将NgbDropdown模块导入要使用它的组件中。

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

然后，如下修改您的.html：

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

您可以在此处查看其他用例。