角度2 - ナビゲーション上にブートストラップnavbarを隠す

Question

モバイルでは、ブートストラップnavbarアイテムをクリックしてもメニューが非表示になります。携帯電話のために示し

マイメニューボタン、：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 

この問題を検索するには、角2にunreleated結果を返されて、私はそれらを実装する方法は考えています。

ユーザーがリンクをクリックしたときにナビゲーションバーを非表示にするにはどうすればよいですか？

<li><a routerLink="/page">Click this should hide nav</a></li> 

Answer 1

あなたはそれを行うカスタムディレクティブを追加することができます

import { Directive, ElementRef, Input, HostListener } from "@angular/core"; 

@Directive({ 
    selector: "[menuClose]" 
}) 
export class CloseMenuDirective { 
    @Input() 
    public menu: any; 

    constructor(private element: ElementRef) { } 

    @HostListener("click") 
    private onClick() { 
     this.menu.classList.remove("show"); 
    } 
} 

は

import { CloseMenuDirective } from './directives/close-menu.directive'; 
@NgModule({ 
    declarations: [ 
     ...declarations, 
     CloseMenuDirective 
    ] 
}) 
export class AppModule { } 

そして宣言配列であなたのapp.moduleにこれを追加することを忘れないでください。 HTMLでは、メニューへの参照を作成し、リンク要素に渡します。

<div class="page-layout"> 
    <!-- Mark the menu with #menu, thus creating a reference to it --> 
    <aside class="collapse navbar-toggleable page-menu" id="navbar-header" #menu> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <a class="nav-link" 
        [routerLink]="['./somewhere']" 
        routerLinkActive="active" 
        menuClose  <!-- Our custom directive above --> 
        [menu]="menu"> <!-- Bind to menu --> 
        <span>My Link</span> 
       </a> 
      </li> 
     </ul> 
    </aside> 
</div> 

Answer 2

これはnavbar（https://github.com/valor-software/ngx-bootstrap/issues/540）の制限です。したがって、DOM要素を操作する必要があります。

<div class="navbar-header page-scroll"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" routerLink="/"> 
     <img src="assets/images/logo.png"> 
    </a> 
</div> 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right" > 
     <li class="hidden"> 
      <a></a> 
     </li> 
     <li><a routerLink="/" (click)="onMenuClick()">Home</a></li> 
     <li><a routerLink="/about" (click)="onMenuClick()">About</a></li> 
    </ul> 
</div> 

そして.TS上の最小限のコードがあることshoulファイル：

import { Component, ElementRef, Renderer } from '@angular/core'; 

export class HeaderComponent { 
    constructor(private el: ElementRef, private renderer: Renderer) { 
    } 
    onMenuClick() { 
     //this.el.nativeElement.querySelector('.navbar-ex1-collapse') get the DOM 
     //this.renderer.setElementClass('DOM-Element', 'css-class-you-want-to-add', false) if 3rd value is true 
     //it will add the css class. 'in' class is responsible for showing the menu. 
     this.renderer.setElementClass(this.el.nativeElement.querySelector('.navbar-ex1-collapse'), 'in', false);   
    } 
}