Angular JS 2 - Bootstrap导航栏下拉不起作用

我正在使用angular 2（使用cli创建的项目）并安装了引导程序。Angular JS 2 - Bootstrap导航栏下拉不起作用

然后将引导程序CSS添加到angular-cli.json，然后样式工作，但是当我使用下拉菜单的导航栏不打开它们时。我以为是因为错过了bootstrap.js，然后在angular-cli.json的脚本部分添加了它，它抱怨jquery！然后补充说。

它开始工作，但我不知道我在做什么是对的。

粘贴angular-cli.json以供参考。

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
    ], 
    "scripts": ["./js/jquery.js",  "../node_modules/bootstrap/dist/js/bootstrap.js"],

来源

2016-11-07 user1342558

我会建议使用一个库，它提供了Angular 2与Bootstrap的本地集成。 https://ng-bootstrap.github.io库具有出色的API，易于使用。好消息是，它也支持下拉菜单，如下所示：https://ng-bootstrap.github.io/#/components/dropdown

用上面提到的库，你不需要安装jQuery或Bootstrap的JS（你只需要CSS）和下拉菜单是非常容易使用的注意ngbDropdown和ngbDropdownToggle指令）：

<div ngbDropdown class="d-inline-block"> 
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <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>

哎，甚至还有为你活生生的例子：http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview

来源

2016-11-07 14:49:25

非常感谢你的时间和例子。但要求是建立一个导航栏，似乎不像本地引导那么简单。如果我错了，请纠正我。 – user1342558

@ user1342558我会说，这是更容易做一个导航栏，例如：http://plnkr.co/edit/4GJl2bBLsjHGhEjn48hx?p=preview –

请参阅http://embed.plnkr.co/Yrtwx02y70qJ91ZvInjB/ – Chandramouli

是的，可能适用于您，有时使用Jquery和Angular可能会导致问题。 bcz bootstrap.js可能会更改dom元素，所以在某些情况下可能会导致一些问题。

但我建议您使用ng2-bootstrap模块，它将允许您访问已经为angular2方式编写的Bootstrap组件。在这里您还可以找到您的Dropdown组件。

来源

2016-11-07 11:09:07

我通过NG2，引导DOCUME去ntation。没有看到导航栏尚未完成。当我看到它时会重构。

但是，我遇到了一个非常简单的教程，不需要你使用jQuery。 https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

请注意，笔者提出的参考媒体查询

@media（最小宽度：768px）{...}

如果你已经有了引导css样式此链接没有必要。
去了我的导航栏组件，并添加了必要的属性，然后单击处理器

isIn = false; 

toggleState() { // click handler for navbar toggle 
    const bool = this.isIn; 
    this.isIn = bool === false ? true : false; 
}

添加上导航栏HTML模板单击处理

<button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()">

新增ngClass来，我想崩溃的DIV

<div id="navbar" class="navbar-collapse collapse" 
    [ngClass]="{'in':isIn}">

来源

2017-03-28 19:52:30 Winnemucca

Angular JS 2 - Bootstrap导航栏下拉不起作用

回答

相关问题