Angular 2 - 在導航上點擊自舉導航欄點擊

Question

在移動設備上，點擊自舉導航欄項目不會隱藏菜單。

我的菜單按鈕，顯示手機：

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

搜索這個問題回到unreleated到角2的結果和我不知道如何實現它們。

如何在用戶點擊鏈接時隱藏導航欄？

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

不要忘了這個聲明數組添加到您的app.module

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

然後在你的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

這是導航欄的限制（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文件的最小碼建議立即進行刪除是：

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