Navbar在使用bootstrap和jQuery的角度下不起作用

Question

我正在使用带有bootstrap，jQuery和popperJS的Angular 7;样式和导航栏按预期打开并且路由正在运行，但是当单击项目时导航栏不会自动关闭，如果单击导航栏以外的其他位置则不会自动关闭。

我的app组件：

<nav class="navbar navbar-expand-lg bg-purple fixed-top navbar-dark shadow-sm" id="navigationBar" role="navigation">
  <div class="container my-1">
    <div>
      <a class="navbar-brand" href="#" style="padding-top: 0.3rem; padding-bottom: 0.3rem"><span class="h2" id="navbar-brand"><span>Brand</span></a>
    </div>

    <a href="#" class="navbar-toggler border-0" data-target="#navbarMenu" aria-expanded="false" aria-controls="navbarMenu" data-toggle="collapse"><i class="fas fa-ellipsis-v"></i></a>

    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ml-auto nav-pills">
        <li class="nav-item">
          <a class="nav-link text-white" data-toggle="collapse" routerLink="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white-80" data-toggle="collapse" routerLink="/skills">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white-80" data-toggle="collapse" routerLink="/projects">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white-80" data-toggle="collapse" routerLink="/socials">Socials</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<router-outlet></router-outlet>

应用程序组件ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

我已经包含了所需的脚本：

"scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js",
          "./src/app/js/strange.js"
],

和风格：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
],

我无法弄清楚如何根据路线动态激活导航栏药丸。

Answer 1

这个片段应该有用。

$(document).ready(() => {
    $(document).click(event => {
        let clickover = $(event.target);
        let opened = $('.navbar-collapse').hasClass('show');
        if (opened === true && !clickover.hasClass('navbar-toggler')) {
            $('.navbar-toggler').click();
        }
    });
});

我无法弄清楚如何根据路线动态激活导航栏药丸。

RouterLinkActive将完成这项工作。