Question

我正在ASP.NET Boilerplate框架中开发一个Web应用程序，该框架使用Angular作为其前端。在我的app.component中，我有此模板附带的侧边栏菜单，单击后退按钮时它会折叠，但是我也希望在单击菜单项后将其折叠。

我尝试过使用在(click)事件上触发的布尔值，并将display: none设置为[ngClass]，但是这样做是无限期地将其删除，而不仅仅是直到再次单击菜单为止。

将菜单添加到html的app.component：

<div class="overlay" id="overlay"></div>

<top-bar></top-bar>

<section (window:resize)="onResize($event)">
    <aside id="leftsidebar" class="sidebar" >
        <sidebar-user-area></sidebar-user-area>
        <sidebar-nav></sidebar-nav>
        <sidebar-footer></sidebar-footer>
    </aside>

    <right-sidebar></right-sidebar>
</section>

<section class="content">
    <div class="container-fluid">
        <router-outlet></router-outlet>
    </div>
</section>

以及包含折叠菜单按钮的顶部栏组件：

<nav class="navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
            <a href="javascript:void(0);" class="bars"></a>
            <a routerLink="/app/home" class="navbar-brand"><img src="../../assets/images/logo_sm.png" style="width: 55px; float: inherit; margin-top: -17px" /> KapelAgenda</a>
        </div>  
    </div>
</nav>

我对Angular不够熟练，无法弄清楚data-toggle和data-target的工作。我该如何关闭菜单项单击上的菜单，而不是仅单击后退按钮上的菜单？

单击时关闭覆盖菜单组件

0 个答案: