ngx-bootstrap 下拉菜单未在 Angular 5 项目中打开
Posted
技术标签:
【中文标题】ngx-bootstrap 下拉菜单未在 Angular 5 项目中打开【英文标题】:ngx-bootstrap dropdown not opening in Angular 5 project 【发布时间】:2018-08-03 13:47:12 【问题描述】:我知道这个问题已经被问到许多不同的 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 的导入移回了我的子模块(一开始没有工作)并且它工作了。我想当我打开这个问题时我犯了一个愚蠢的错误,但我找不到什么。我将其保持打开状态以防它对某人有所帮助...
【问题讨论】:
您能否更新一下您的 dropdownComponent.ts 和父组件的模板文件代码? @PiyushRathi 我不再从事这个项目对不起:/ 【参考方案1】:希望您正确使用 selector: 'demo-dropdown-basic'
inn 您的 component.ts 并包含到父组件的 html 中,例如 <demo-dropdown-basic></demo-dropdown-basic>
【讨论】:
正如我的问题中提到的,我只做了 3 件事:将 boostrap 样式表添加到我的 index.html 头部部分,包括我的 App 模块中的 BsDropdownModule,然后我只是将示例复制/粘贴到到我的子组件 html 好的。但您应该拥有示例中提到的“component.ts”,标题为“单按钮下拉菜单”valor-software.com/ngx-bootstrap/#/dropdowns#single-button。【参考方案2】:您是否告诉您的按钮实际显示下拉菜单?您需要一个 [isOpen]="whatever",然后可能需要另一个按钮、服务、链接,无论您在何处切换 whatever
变量,例如在示例 here 中。
【讨论】:
在我使用的第一个示例中,我没有看到这样的触发器。 这里:valor-software.com/ngx-bootstrap/#/dropdowns#triggers-manual 我收到此错误:Can't bind to 'isOpen' since it isn't a known property of 'div'
另一个问题,你是否包含了css文件?通常你必须将它添加到 .angular-cli.json 的某个地方。
我的 index.html 头部只有<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet>"
,还不够吗?以上是关于ngx-bootstrap 下拉菜单未在 Angular 5 项目中打开的主要内容,如果未能解决你的问题,请参考以下文章
EasyAdmin Bundle 创建的下拉菜单未在选择时关闭
如何在 Angular 的下拉菜单中使用 Show Class