在使用ng-bootstrap和Angular 4时，在浏览器中无法呈现导航栏的问题

Question

在使用ng-bootstrap和Angular 4时，在浏览器中无法呈现导航栏的问题

6

我正在构建我的第一个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可以正常工作的导航栏示例？

- TSG

你是否将Bootstrap CSS添加到你的项目中了？ - ConnorsFan

是的 - NgbCheckbox 渲染得很好，所以 ng-bootstrap 组件正在工作。只是上面的 NAV 没有。 - TSG

2个回答

1

请尝试使用Angular而非ng-Bootstrap实现相同的功能。

以下是一个小例子：

模板

<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>
.....

Directive

 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指令制作的顶部导航栏的同一示例链接。

- Rahul Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Staroselsky · Accepted Answer

由于没有导航组件，您需要使用折叠功能ng-bootstrap的ngbCollapse组件以及NgbDropdown组件的下拉功能的组合。您需要将ngbCollapse的实例绑定到div.collapse.navbar-collapse和组件类上的布尔属性。 ng-bootstrap不需要data-*，因此您可以删除诸如data-toggle =“collapse”之类的属性。通过像单击事件这样的方式来切换组件类上的属性的开/关状态，从而控制折叠菜单的打开/关闭状态。在这个例子中，通过在button.navbag-toggler上执行一个组件方法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>

在 Bootstrap 4 navbar 的样式方面，您需要使用以下类：

导航栏需要使用带有 .navbar-toggleable-* 的包装 .navbar 进行响应式折叠和颜色方案类。

此外，在 Bootstrap 4 中，像 button.navbar-toggle 这样的元素现在是 button.navbar-toggler，带有一个 "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演示功能和样式的实际效果。