引导4角2下拉不工作
我都遵循以下,以引导4安装到我的角2项目:Accepted Answer, following the first 1,2,3 and 4 steps引导4角2下拉不工作
然而,当我添加以下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">[email protected]</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"
],
而且在我的角2模块:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
我然后导入到NgbModule进口部分。
我已经明确地错过了一些东西,有人可以说明它到底是什么吗?
CSS需要位于<head></head>
标记中。
我从引导引述
复制 - 粘贴样式
<link>
到您的<head>
之前的所有其他 样式表来加载我们的CSS。
我继续引述
加入我们的JavaScript插件,jQuery和系绳靠近你 页结束,结束标记之前。请务必首先放置jQuery 和Tether,因为我们的代码依赖于它们。
确保您在这里这样 是引导文件在那里我得到这个报价 https://v4-alpha.getbootstrap.com/getting-started/introduction/
和检查这个答案后,你分享的链接 https://*.com/a/39809447/3284537
有人创建了专门为Angular 2+设计的模板库的新版本。据该网站称,它是由ng-team开发的,虽然它给出的链接得到了404响应。不过,它确实有效,而且我在当前项目中的多处使用它。你只需要用npm来访问这个库。所有的指令都是这个网站上:
http://valor-software.com/ngx-bootstrap/#/
页面所显示的你所有你需要开始安装和使用说明。我希望这有帮助!
您链接到的页面不是通过引导程序的项目 –
尽管它与Angular 4一起工作,并且是一个很好的资源。它使用所有引导对象并为它们提供工作模板。根据该网站,它是由ng-team制作的,我以前错过了。 – Grungondola
是的,我意识到这一点,我自己在项目中使用它。我的评论只是为了纠正它不是由bootstrap提供的事实:)谢谢你纠正你的答案。 –
您需要添加下拉指令才能使其工作。 该指令是这样的:
import { Directive,HostListener,HostBinding } from '@angular/core';
@Directive({
selector: '[appcustomdropdown]'
})
export class CustomdropdownDirective {
constructor() { }
@HostBinding('class.open') get opened()
{
return this.isOpen;
}
@HostListener('click') open()
{
this.isOpen=true;
}
@HostListener('mouseleave') close()
{
this.isOpen=false;
}
private isOpen=false;
}
然后,您将添加属性,像这样:在@VictorLuchian
<li class="nav-item dropdown" appcustomdropdown >
使用Bootstrap 4.0.0-alpha6下拉按钮,我将'class.open'更改为'class.show'以使其工作。 – petryuno1
变化的最新BS4测试,似乎“秀”类需要也可以添加到下拉菜单中。 该版本包括外单击关闭,而不是鼠标移开
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')
}
}
}
-
请从这个链接Getting Started用下面的命令来安装NG-引导:
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>
一些插件和CSS组件依赖于其他插件。如果您单独包含插件, 请确保在文档中检查这些依赖关系。还要注意,所有插件都依赖于 jQuery(这意味着jQuery必须包含在插件文件之前)。
在.angular-cli.json
以下行添加到脚本的一节:
# version 4.x
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
]
它也取决于系绳lib。将它添加到angular.cli.json “../node_modules/jquery/dist/jquery.js”, **“../ node_modules/tether/dist/js/tether.min.js”,** “../node_modules/bootstrap/dist/js/bootstrap.js”, – Sriram
我已经用于获取下拉上collpased导航栏不同的方法。
STEP 1 导航栏上的切换按钮
<button type="button" class="navbar-toggle" data-toggle="collapse" (click)="OnClik()" data-target="#myNavbar"
的Html
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" (click)="OnClik()" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse " [ngClass]="{'show': buttontoggled}" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
第二步:添加单击事件: 器里面 导航栏组件的功能。TS(以上导航栏HTML模板使用导航栏组件内)
import { Component} from '@angular/core';
export class HeaderComponent {
buttontoggled:boolean:false;
OnClik(){
this.buttontoggled=!this.buttontoggled;
}
基于导航栏切换按钮第3步 单击添加类显示(引导4)或open
对以前版本的引导。 我们可以使用ngClass指令该
<div class="collapse navbar-collapse " [ngClass]="{'show': buttontoggled}" id="myNavbar">
工作流程
导航栏切换按钮将是可见的,当歌厅坍塌较小的分辨率
通过处理按钮单击事件导航栏,我们可以设置一个标志来检查按钮是否被点击
基于这个标志我们将 我们将把css class show绑定到n avabr div使用ngClass指令
以下是如何将ng-bootstrap添加到您的模块:https://ng-bootstrap.github.io/#/getting-started。下面是ng-bootstrap下拉菜单的工作原理:https://ng-bootstrap.github.io/#/components/dropdown。你不能仅仅使用bootstrap的文档,并且希望完全相同的标记可以与ng-bootstrap一起工作:ng-bootstrap的要点是允许以角度方式使用引导组件。 –
感谢您的链接!大量帮助我!它使用ngbDropdown工作 –
请注意,引导程序4是alpha,并不是好主意,用于项目。因为它会有很多变化并且不稳定。只是用它来学习未来。 –