javascript - 在 Typescript 中以编程方式折叠 Bootstrap 导航栏

Question

我正在使用 Bootstrap 的导航栏，并且可以通过在每个 li 上使用 data-toggle 和 data-target 使其成功折叠元素。

这个答案展示了一种无需更改每个 li 即可做到这一点的方法: https://stackoverflow.com/a/42401686/279516

这是我的导航栏，其中包含两个 li 元素:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
      <a class="nav-link" href="#" routerLink="/servers">Servers</a>
    </li>
    <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
      <a class="nav-link" href="#" routerLink="/servers">Variables</a>
    </li>

我即将在 Angular 8 Typescript 文件中完成此任务:

export class AppComponent implements OnInit {
  ngOnInit(): void {
    const navbarItems = document.querySelectorAll('.navbar-nav>li');
    navbarItems.forEach(navbarItem => {
      navbarItem.addEventListener('click', () => {
        const navbar = document.querySelector('.navbar-collapse').collapse('hide');
      })
    });
  }
}

问题是最后一行:

Property collapse does not exist on type element.

首先，我应该做什么才能让它发挥作用？ 二、有没有更好的办法？

我尝试将 navbar 转换为不同类型的 HTML 元素，但这也不起作用。

Answer 1

你可以用 Angular 的方式来做这件事。像这样:

<button class="navbar-toggler" type="button" (click)="showMenu=!showMenu">
    <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" [ngClass]="{'show':showMenu}">
     ...
 </div>