在 Typescript 中以编程方式折叠引导导航栏答案

【问题标题】：Programmatically Collapse Bootstrap Navbar in Typescript在 Typescript 中以编程方式折叠引导导航栏
【发布时间】：2019-09-10 14:42:39
【问题描述】：

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

这个 SO 答案显示了一种无需更改每个 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');
      })
    });
  }
}

问题是最后一行：

类型element 上不存在属性collapse。

首先，我应该怎么做才能让它工作？二、有没有更好的办法？

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

【问题讨论】：

你能试试这个(<HTMLElement>document.querySelector('.navbar-collapse')).collapse('hide');吗？
我刚试过。同样的错误。
您是否考虑过使用 Angular 的 Bootstrap 小部件？您寻求的功能全部 OOB 提供：ng-bootstrap.github.io/#/components/collapse/examples
@jcruz 我已经在使用 Bootstrap，点击汉堡菜单图标时它会崩溃。我只是想通过单击导航栏中的项目时折叠它来增强它。
@BobHorn 你这样做的方式不遵循 MVC/MVVM 模式，所以不清楚你正在使用 ng-bootstrap。无论如何，最好的做法是使用类似于 Jens 答案的模式。

标签： javascript angular twitter-bootstrap typescript

【解决方案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>

【讨论】：

【解决方案2】：

我可以通过从课程列表中删除“显示”来使其工作，显示在此处的最后一行。

（我仍然不确定这是否是一个好方法，但它确实有效。）

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');
        navbar.classList.remove('show');
      })
    });
  }
}

【讨论】：