Angular 2 - 在导航点击时隐藏引导导航栏答案

【问题标题】：Angular 2 - hide bootstrap navbar on nav clickAngular 2 - 在导航点击时隐藏引导导航栏
【发布时间】：2016-10-28 10:37:57
【问题描述】：

在移动设备中，单击引导导航栏项不会隐藏菜单。

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

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

搜索此问题返回的结果与 angular 2 无关，我不知道如何实现它们。

当用户点击链接时如何隐藏我的导航栏？

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

【问题讨论】：

标签： angular

【解决方案1】：

仅在 Angular 2/4 模板中实现这一点的非常好且简单的方法：

<nav class="navbar navbar-default" aria-expanded="false">
  <div class="container-wrapper">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
      <ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/">Home</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
      </ul>
    </div>

  </div>
</nav>

【讨论】：

我必须将 [ngClass]="{collapse:isCollapsed}" 更改为 {collapse: !isCollapsed} 否则每次加载页面时都会显示菜单。

【解决方案2】：

你可以添加一个自定义指令来为你做这件事

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>

【讨论】：

怎么不行？如果您对帮助感兴趣，则需要指定详细信息。你有错误吗？
我认为原因是我使用的是 bootstap 3.3.7 并且导航栏没有 show 类；它是in
我相信在这种情况下正确的课程可能是“开放的”

【解决方案3】：

此代码模拟单击 burguer 按钮以通过单击菜单中的链接来关闭导航栏，从而保持淡出效果。 Angular 7 的 typescript 解决方案。避免 routerLink 问题。

ToggleNavBar () {
    let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
    if ( element.getAttribute( 'aria-expanded' ) == 'true' ) {
        element.click();
    }
}

<li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()">link1</a>
</li>

【讨论】：

我会将其重命名为 closeNavBar

【解决方案4】：

这是导航栏 (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);        
    }
}

【讨论】：

【解决方案5】：

在最新版本的 bootstrap (4.0) 上，您可以使用 data-target=".show" 来实现您所需要的。 “show”是一个附加到可折叠元素的类，以使其可见。示例：

<button class="btn btn-primary" data-toggle="collapse" data-target=".show">Link_1</button>

【讨论】：