我正在构建我的第一个Angular 4应用程序,使用ng-bootstrap(Bootstrap 4 for Angular) - 不使用常规Boostrap
ng-bootstrap网站(https://ng-bootstrap.github.io/#/components/accordion/api)没有列出导航栏的组件(就像它在Bootstrap 3或常规bootstrap 4中所做的那样)。这是否意味着我必须从下拉菜单/按钮构建菜单?或者我必须将常规的Bootstrap 4与ng-bootstrap混合使用?
我尝试在html中创建此菜单,但它不会在浏览器中呈现(只是一个品牌" MyWebSiteName"我屏幕上的灰色小框,没有导航)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MyWebSiteName</a>
</div>
<div class="collapse navbar-collapse" 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>
这个HTML有问题吗?或者有人有一个使用ng-bootstrap的Navbar示例吗?
答案 0 :(得分:8)
由于没有导航组件,您需要结合折叠功能ng-bootstrap的ngbCollapse组件以及NgbDropdown组件的下拉功能。
您需要将ngbCollapse
的实例绑定到div.collapse.navbar-collapse
,并在组件类上绑定一个布尔属性。 ng-bootstrap对data-*
没有任何用处,因此您可以删除data-toggle="collapse"
等属性。
您可以通过组件类上的属性来控制折叠菜单的打开/关闭状态,该属性通过点击事件切换为true
/ false
。在此示例中,通过(click)
上的button.navbag-toggler
事件处理程序切换,在toggleMenu()
上执行组件isCollapsed
上的方法,该方法只是通过{{1}反转布尔属性!
的值运营商。
对于菜单项下拉菜单,您将使用NgbDropdown组件。您将属性ngbDropdown
和ngbDropdownToggle
分别应用于容器元素和切换元素。
<div class="nav-item dropdown" ngbDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="dropdownBasic1">
<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>
就Bootstrap 4 navbar的样式而言,您需要使用以下类:
Navbars需要使用 .navbar-toggleable - * 打包 .navbar 响应式折叠和配色方案类。
button.navbar-toggle
等元素现在button.navbar-toggler
在Bootstrap 4中带有“r”。您可以使用类navbar-inverse
和bg-inverse
作为标准反向导航栏。
<强> HTML:强>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" aria-controls="appNavigation" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation" (click)="toggleMenu()">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="appNavigation" [ngbCollapse]="isCollapsed">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" routerLink="" routerLinkActive="active">Home</a>
<a class="nav-item nav-link" routerLink="/about" routerLinkActive="active">About</a>
<div class="nav-item dropdown" ngbDropdown>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="dropdownBasic1">
<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>
</div>
</div>
</nav>
<强> TS:强>
export class NavigationComponent {
isCollapsed = true;
constructor() {}
toggleMenu() {
this.isCollapsed = !this.isCollapsed;
}
}
这是一个plunker,展示了行动中的功能和样式。
希望这有帮助!
答案 1 :(得分:1)
而不是使用ng-Bootstrap尝试使用Angular。
小例子
<强>模板强>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="isActive = !isActive"> // add this for the responsive button
<span class="navbar-toggler-icon"></span>
</button>
<a routerLink="/home"><img src="angular.png" class = "myImage" alt="Image"/></a>
<div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}">
<ul class="navbar-nav">
<li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown> // add this directive for the dropdown
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Basic Concepts
</a>
.....
<强>指令强>
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;
}
相同的工作示例顶部的导航栏使用bootstrap和Angular指令Link