导航栏无法使用ng-bootstrap&angular 4在浏览器中渲染

我正在构建我的第一个Angular 4应用程序,使用ng-bootstrap(Bootstrap 4 for Angular) – 不使用常规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的Navbar示例？

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

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

您可以通过组件类上的属性控制折叠菜单的打开/关闭状态,该属性通过单击事件等方式切换为true / false.在这个例子中,通过button.navbag-toggler上的(click)事件处理程序切换,在组件toggleMenu()上执行一个方法,它只是通过！反转boolean属性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的样式方面,您需要使用以下类：

Navbars require a wrapping .navbar with .navbar-toggleable-* for
responsive collapsing and color scheme classes.

此外,诸如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,展示了功能和样式.

希望这有帮助！