導航欄不使用NG-引導和角4

Question

我建立我的第一個角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的例子？

Answer 1

由於沒有導航組件，您需要使用摺疊功能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揭示了動作的功能和造型。

希望有幫助！

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; 
    } 

工作實施例在上面同一導航欄的是使用自舉和角指令作出Link