ngx-bootstrap 下拉菜单未在 Angular 5 项目中打开

Question

我知道这个问题已经被问到许多不同的 angular/ngx-bootstrap 配置，但由于我找不到任何有用的答案，我决定打开这个问题。

我正在尝试使用 ngx-boostrap 集成引导下拉组件：

package.json

"ngx-bootstrap": "^2.0.2",

在我的index.html

头

link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"

在我的 app.module.ts

import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    BsDropdownModule.forRoot()
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

然后我有一个子模块，我尝试在其中加载下拉列表：

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

下拉按钮出现，但当我单击它时没有任何反应。我使用检查器检查了 DOM，下拉菜单的内容仍然是空的。

我该怎么做才能使这个下拉菜单起作用？

编辑

我不知道怎么做，但是在玩弄了导入之后它最终工作了。

我将 BsDropdownModule 的导入移回了我的子模块（一开始没有工作）并且它工作了。我想当我打开这个问题时我犯了一个愚蠢的错误，但我找不到什么。我将其保持打开状态以防它对某人有所帮助...

Answer 1

希望您正确使用 selector: 'demo-dropdown-basic' inn 您的 component.ts 并包含到父组件的 html 中，例如 <demo-dropdown-basic></demo-dropdown-basic>

Answer 2

您是否告诉您的按钮实际显示下拉菜单？您需要一个 [isOpen]="whatever"，然后可能需要另一个按钮、服务、链接，无论您在何处切换 whatever 变量，例如在示例 here 中。