分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular 2 – 在导航点击时隐藏bootstrap导航栏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在移动设备中,单击引导程序导航栏项不会隐藏菜单.

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

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

搜索此问题返回结果未发布到角度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中创建对菜单的引用并将其传递给link元素.

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