【问题标题】:ngx-bootstrap dropdown not opening angular 4 bootstrap 4ngx-bootstrap 下拉菜单未打开 angular 4 bootstrap 4
【发布时间】:2017-08-17 00:15:22
【问题描述】:

我无法弄清楚这里发生了什么 - 我已经包含了我认为根据文档正确的 ngx-dropdown 代码:

home.component.html

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

app.module.ts

@NgModule({
  imports: [
    BsDropdownModule.forRoot(),
    ...
    ]

site.module.ts(这是包含 home 组件的模块)

@NgModule({
  imports: [
    BsDropdownModule,

我正在使用 angular-cli,并且我已经包含了引导样式:

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

index.html 中我添加了一个 sn-p 让浏览器知道我正在使用 bootstrap 4:

<script>window.__theme = 'bs4';</script>
<app-root>Loading . . .</app-root>

按钮出现,并且控制台中没有显示错误。当我单击按钮时,我可以看到 dom 发生了变化(“打开”和“显示”被添加到样式中)。但是按钮下方没有打开 - 没有显示菜单。

我不知道该去哪里看看

【问题讨论】:

  • 你能创建 plunkr 吗?
  • 为什么不使用指令来添加和删除引导下拉类的类,而不是使用扩展。例如link。检查导航栏

标签: angular bootstrap-4 ngx-bootstrap


【解决方案1】:

我也有这个问题。 在浪费了几个小时后,我发现了这个:

这是一个官方问题:

https://github.com/valor-software/ngx-bootstrap/issues/2413

【讨论】:

    【解决方案2】:

    我遇到了同样的问题。在我从'@angular/platform-b​​rowser/animations'导入'import {BrowserAnimationsModule}之后;'到 app.module.ts 并将 BrowserAnimationsModule 添加到 imports: [] 问题就解决了。使用一些不必要的代码,您的 app.module.ts 应该如下所示。我目前正在使用 Angular 9.0:

    import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    ...
    @NgModule({
     ...
    },
     imports:[
      BrowserAnimationsModule,
      BsDropdownModule.forRoot()
     ],
     ....
    })
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-08-03
      • 2019-01-31
      • 1970-01-01
      • 1970-01-01
      • 2019-08-27
      • 1970-01-01
      • 2018-10-05
      • 2019-01-23
      相关资源
      最近更新 更多