导航菜单下拉菜单不起作用Angular4 Bootstrap 3
在我的Angular4应用程序中,我创建了一个标准导航栏。当屏幕尺寸减小时,会出现导航菜单下拉菜单。当点击菜单下拉菜单时,(折叠)链接不显示。导航菜单下拉菜单不起作用Angular4 Bootstrap 3
问题:如何获取用于Angular 4 + Bootstrap 3的菜单下拉菜单?
我创建了一个标准组件。这是模板文件:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a routerLink="/search" class="navbar-brand">Brand-name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a routerLink="/search">Search</a></li>
<li><a routerLink="/edit">Edit</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a routerLink="/signup">Signup</a></li>
</ul>
</div>
</div>
</nav>
当然,我读了类似的问题和文章,但没有人帮助我进一步。大多数是关于自举而已,不能与角4
所有的答案到目前为止演示如何打开下拉菜单。在选择菜单项后,答案不会显示如何折叠该下拉菜单。
感谢Thomas Rundle的基本部分可以在following solution中找到。我添加了一些代码。该header.component.ts是:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isIn : boolean = false; // store state
constructor() { }
ngOnInit() {
}
toggleState() { // click handler
let bool = this.isIn;
this.isIn = bool === false ? true : false;
}
}
模板header.component.html是:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" (click)="toggleState()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <!-- #1 -->
<a class="navbar-brand" routerLink="/page1">Project Manager</a>
</div>
<div class="collapse navbar-collapse in" [ngClass]="{ 'in': isIn }">
<ul class="nav navbar-nav">
<li><a role="tab" (click)="toggleState()" data-toggle="tab" routerLink="/page1">Page 1</a></li>
<li><a role="tab" (click)="toggleState()" data-toggle="tab" routerLink="/page2">Page 2</a></li>
</ul>
</div> <!-- #2 -->
</div>
</nav>
https://plnkr.co/edit/oSKnNWXNafbMjCiPwqrv?p=preview
,因为你有目标=“#导航栏”,你必须设定目标的ID导航栏为它工作的结合。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a routerLink="/search" class="navbar-brand">Brand-name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a routerLink="/search">Search</a></li>
<li><a routerLink="/edit">Edit</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a routerLink="/signup">Signup</a></li>
</ul>
</div>
</div>
</nav>
谢谢。当我尝试响应时,下拉菜单在中到大屏幕上不会消失。你可以看到没有你的代码的行为。因为它是一个故障码通用代码,你能进一步帮助吗? – tjm1706
引导程序下拉显示增加了一类开放<ul>
元素下拉出现和关闭,您可以利用角指令到同一个行为添加到组件。
应用下拉指令
import {Directive, HostListener, HostBinding} from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
private isOpen:boolean = false;
@HostBinding('class.open') get opened(){
return this.isOpen;
}
constructor() { }
@HostListener('click')open(){
this.isOpen = true;
}
@HostListener('mouseleave')close(){
this.isOpen = false;
}
它坚持你UL <ul class="nav navbar-nav" appDropdown>
引导附带了崩溃的东西一定的jQuery库。你有进口吗? https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start – Vega
是的,我将jquery.3.2..0.js和bootstrap.js插入index.html。这是正确的地方吗?我没有将header-html作为index.html的一部分,因为routerlinks不起作用。我应该通过angular-cli的脚本标记导入它们吗?请显示我应该包括的地方。 Workig与单独的似乎是一个好方法。 –
tjm1706