导航栏不使用NG-引导和角4

我建立我的第一个角4应用程序在浏览器中呈现，采用NG-引导（引导4角） - 不使用常规的自举导航栏不使用NG-引导和角4

的NG-引导网站（https://ng-bootstrap.github.io/#/components/accordion/api ）没有列出导航栏的组件（就像它在Bootstrap 3或常规引导程序4中那样）。这是否意味着我必须从下拉菜单或按钮中创建菜单？或者我必须将常规Bootstrap 4与ng-bootstrap混合？

我试图创建的HTML这个菜单，但不会在浏览器（我的屏幕上只是一个品牌“MyWebSiteName”和灰色的小盒子，没有NAV）

<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的例子？

来源

2017-08-07 TSG

您是否将[Bootstrap CSS]（https://ng-bootstrap.github.io/#/getting-started）添加到您的项目中？ – ConnorsFan

是的 - 而NgbCheckbox渲染完美，所以ng-bootstrap组件正在工作。只是上面的NAV不是 – TSG

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

您需要将ngbCollapse的实例绑定到div.collapse.navbar-collapse以及组件类上的布尔属性。 NG-引导不具有任何data-*使用，所以你可以删除这些属性为data-toggle="collapse"。

您可以通过组件类上的某个属性来控制折叠菜单的打开/关闭状态，该属性通过类似于单击事件的事件触发true/false。在这个例子中是经由所述部件toggleMenu()简单地反转经由!操作者的布尔属性isCollapsed的值上执行的方法，在一个button.navbag-toggler(click)事件处理程序切换。

菜单项下拉菜单，你会使用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车型方面，你需要使用以下类：

导航栏需要包装.navbar与.navbar-toggleable- *为响应塌陷和配色方案类。

另外元素例如button.navbar-toggle现在button.navbar-toggler是用“R”在引导4.您使用类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揭示了动作的功能和造型。

希望有帮助！

来源

2017-08-07 17:42:36

谢谢！这帮了很多。但是有一个问题，将动画添加到开启和关闭导航窗格的最佳方式是什么？就像在这个演示中（动画由jQuery完成）：https://blackrockdigital.github.io/startbootstrap-logo-nav/ – MehmetGunacti

@MehmetGunacti崩溃和类似组件的动画似乎目前在ng-bootstrap中不可用。您需要使用[Angular-Animations]（https://angular.io/guide/animations）等动画来折叠或CSS3转场的属性。我会避免尝试使用jQuery。 –

index.html中的unpkg.com内容是什么？另外，config.js中的东西是从哪里来的？我有Angular 5的ng书，我不认为它在那里... – mikeglaz

而不是使用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; 
    }

工作实施例在上面同一导航栏的是使用自举和角指令作出Link

来源

2017-08-07 19:34:29

导航栏不使用NG-引导和角4

回答

相关问题