Angular 2 - 在导航上点击自举导航栏点击

问题描述：

在移动设备上，点击自举导航栏项目不会隐藏菜单。Angular 2 - 在导航上点击自举导航栏点击

我的菜单按钮，显示手机：

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

答

您可以添加，做它的自定义指令您

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>

不为我工作 – amirsa00

它是如何不工作？如果您对帮助感兴趣，则需要指定详细信息。你有错误吗？ – Patrick

我认为原因是我使用bootstap 3.3.7，没有'show'类的navbar;这是'在' – amirsa00

答

这是导航栏的限制（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);   
    } 
}

Angular 2 - 在导航上点击自举导航栏点击

相关推荐