Angular 6 - 单击时折叠移动菜单

Question

我有一个 Angular 6 的静态页面，其中包含一些选项卡，如何在单击元素时使移动菜单折叠？我需要这样的 jQuery 代码（我不能使用 jQuery）。

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

我的导航菜单代码如下。

<ul class="navbar-nav w-100">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Finance legal tax and HR
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Information technology
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fa fa-check mb-3"></i> Risk and cybersecurity
        </a>
    </li>
</ul>

Answer 1

您可以将 click-event-handler 与组件属性一起使用。

export class MyComponent{
 collpaseMenu: boolean = false;
}

在你的模板中：

<button (click)="collapseMenu = !collapseMenu"></button>

<ul class="navbar-nav w-100" [hidden]="collapseMenu">...</ul>