Cod*_*het 12 twitter-bootstrap angular
我已经按照以下步骤将bootstrap 4安装到我的Angular 2项目中:接受的答案,遵循前1,2,3和4步骤
但是,当我将以下内容添加HTML到我的标题组件时:
<nav class="navbar-dark bg-inverse">
<div class="container">
<a href="#" class="navbar-brand"></a>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SomeEmail@hotmail.com</a>
<div class="dropdown-menu" aria-labelledby="nav-dropdown">
<a href="#" class="dropdown-item">Sign Out</a>
</div>
</li>
</ul>
</div>
正如你可以看到它的基本下拉菜单,当我点击下拉菜单时页面刷新,而不是显示'退出'选项.
这是我的angular-cli.json样式部分:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
在我的Angular 2模块中:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
然后我将NgbModule导入导入部分.
我显然错过了一些东西,有人可以说明它可能究竟是什么吗？
Sha*_*tul 14
请从此链接安装ng-bootstrap 以下命令入门:
npm `install --save @ng-bootstrap/ng-bootstrap`
app.module.ts像它一样导入它
import `{NgbModule} from '@ng-bootstrap/ng-bootstrap';`
导入
imports:[
NgbModule.forRoot(),
]
添加ngbDropdown下拉列表
添加ngbDropdownToggle下拉列表切换DOM
ngbDropdownMenu在下拉菜单DOM上添加
<li ngbDropdown class="nav-item dropdown" >
<a ngbDropdownToggle class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
Adr*_*let 12
@VictorLuchian对于最新的BS4 beta的变化,似乎'show'类也需要在下拉菜单中添加.此版本包括外部关闭而非鼠标输出
import { Directive,HostListener,HostBinding, ElementRef } from '@angular/core';
@Directive({
selector: '[customdropdown]'
})
export class CustomDropdownDirective {
private isOpen: boolean =false;
constructor(private _el: ElementRef) {
}
@HostBinding('class.show') get opened() {
return this.isOpen;
}
@HostListener('click') open() {
this.isOpen = true;
this._el.nativeElement.querySelector('.dropdown-menu').classList.add('show')
}
@HostListener('document:click', ['$event.target']) close (targetElement) {
let inside: boolean = this._el.nativeElement.contains(targetElement);
if(!inside) {
this.isOpen = false;
this._el.nativeElement.querySelector('.dropdown-menu').classList.remove('show')
}
}
}
一些插件和CSS组件依赖于其他插件.如果单独包含插件,请确保在文档中检查这些依赖项.另请注意,所有插件都依赖于jQuery(这意味着必须在插件文件之前包含jQuery).
将以.angular-cli.json下行添加到scripts部分:
# version 4.x
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
]
就像Andrien所说的那样，您可以像这样简化代码。
constructor(private _el: ElementRef) { }
@HostBinding('class.show') isOpen = false;
@HostListener('click') toogleOpen() {
this.isOpen = !this.isOpen;
this._el.nativeElement.querySelector('.dropdown-menu').classList.toggle('show')
}
CSS 需要位于<head></head>标签中。
我引用自引导程序
将样式表复制粘贴
<link>到<head>所有其他样式表之前，以加载我们的 CSS。
我继续引用
将我们的 JavaScript 插件、jQuery 和 Tether 添加到页面末尾附近、结束标记之前。确保首先放置 jQuery 和 Tether，因为我们的代码依赖于它们。
确保您以这种方式获得了引导文档的链接，我在其中得到了这个引号 https://v4-alpha.getbootstrap.com/getting-started/introduction/
并在您共享链接的帖子中检查此答案 /sf/answers/2786661321/
| 归档时间： |
|
| 查看次数： |
29471 次 |
| 最近记录： |