ナビゲーションバーがNG-ブートストラップ（角のためのブートストラップ4）を使用して、私は私の最初の角4アプリを構築していますNG-ブートストラップ＆角度4

Question

を使用してブラウザでのレンダリングではない - 通常のブートストラップ

NG-ブートストラップウェブサイト（https://ng-bootstrap.github.io/#/components/accordion/apiを使用していません）は、（ブートストラップ3または通常のブートストラップ4で行ったように）navbarのコンポーネントをリストしません。それは私がドロップダウン/ボタンのメニューを構築する必要があるということですか？または、通常のブートストラップ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> 

I何かに表示されませんこのHTML？あるいは誰かがng-bootstrapで動作するNavbarの例を持っていますか？

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をそれぞれ適用します。ブートストラップ4 navbarのためのスタイリングの面では

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

、あなたは以下のクラスを使用する必要があります：

Navbarsは用.navbar-toggleable-で包む.navbar *が必要です 応答的な折りたたみおよびカラースキームのクラス。

また、そのようなbutton.navbar-toggleなどの要素が、今あなたは、標準の逆ナビゲーションバーのクラスnavbar-inverseとbg-inverseを使用するブートストラップ4の「R」とbutton.navbar-togglerです。

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