导航栏未使用 ng-bootstrap 和 angular 4 在浏览器中呈现

Question

我正在构建我的第一个Angular 4应用程序，使用ng-bootstrap(Angular的Bootstrap 4( - 不使用常规的Boostrap

ng-bootstrap网站(https://ng-bootstrap.github.io/#/components/accordion/api(没有列出导航栏的组件(就像在Bootstrap 3或常规引导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一起使用的导航栏示例？

Answer 1

由于没有导航组件，您需要结合使用折叠功能ng-bootstrap的ngbCollapse组件以及NgbDropdown组件的下拉功能。

您需要将ngbCollapse的实例绑定到组件类上的div.collapse.navbar-collapse和布尔属性。 ng-bootstrap 对data-*没有任何用处，因此您可以删除data-toggle="collapse"等属性。

您可以通过组件类上的属性控制折叠菜单的打开/关闭状态，该属性通过单击事件之类的内容true/false切换。在此示例中，通过button.navbag-toggler上的(click)事件处理程序进行切换，在组件toggleMenu()上执行方法，该方法仅通过!运算符反转布尔属性isCollapsed的值。

对于菜单项下拉菜单，您将使用 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>

在引导 4 导航栏的样式方面，您需要使用以下类：

导航栏需要一个带有.navbar-toggleable-*的包装.navbar响应式折叠和配色方案类。

此外，像button.navbar-toggle这样的元素现在在 Bootstrap 4 中用"r"button.navbar-toggler。将类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。

Answer 2

与其使用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;
}

相同的工作示例 顶部的导航栏是使用引导和 Angular 指令链接制作的