引导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进口部分。

我已经明确地错过了一些东西，有人可以说明它到底是什么吗？

来源

2016-12-24 Code Ratchet

以下是如何将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，并不是好主意，用于项目。因为它会有很多变化并且不稳定。只是用它来学习未来。 –

CSS需要位于<head></head>标记中。
我从引导引述

复制 - 粘贴样式<link>到您的<head>之前的所有其他样式表来加载我们的CSS。

我继续引述

加入我们的JavaScript插件，jQuery和系绳靠近你页结束，结束标记之前。请务必首先放置jQuery 和Tether，因为我们的代码依赖于它们。

确保您在这里这样是引导文件在那里我得到这个报价 https://v4-alpha.getbootstrap.com/getting-started/introduction/

和检查这个答案后，你分享的链接 https://stackoverflow.com/a/39809447/3284537

来源

2016-12-24 23:23:45 Emiliano

链接

有人创建了专门为Angular 2+设计的模板库的新版本。据该网站称，它是由ng-team开发的，虽然它给出的链接得到了404响应。不过，它确实有效，而且我在当前项目中的多处使用它。你只需要用npm来访问这个库。所有的指令都是这个网站上：

http://valor-software.com/ngx-bootstrap/#/

页面所显示的你所有你需要开始安装和使用说明。我希望这有帮助！

来源

2017-05-26 15:30:04 Grungondola

您链接到的页面不是通过引导程序的项目 –

尽管它与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 >

来源

2017-05-30 05:17:48

使用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') 
    } 
} 
}

来源

2017-08-23 10:30:41

请从这个链接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>

来源

2017-10-14 15:20:50

一些插件和CSS组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖关系。还要注意，所有插件都依赖于 jQuery（这意味着jQuery必须包含在插件文件之前）。

在.angular-cli.json以下行添加到脚本的一节：

# version 4.x 
    "scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.js", 
    ]

Checkout definition here

来源

2017-10-18 19:12:11

它也取决于系绳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指令

来源

2017-11-26 17:22:28 Lijo

引导4角2下拉不工作

回答

相关问题