Navbar не работает в угловом режиме с начальной загрузкой и JQuery - PullRequest
Новая
       23

Navbar не работает в угловом режиме с начальной загрузкой и JQuery

0 голосов
/ 27 февраля 2019

Я использую Angular 7 с начальной загрузкой, jQuery и popperJS;Стили и панель навигации открываются, как и ожидалось, и маршрутизация работает, но панель навигации не закрывается автоматически при щелчке элемента, а также не происходит, если щелкают где-то, кроме панели навигации.

Мой компонент приложения: 

<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"
],

И я не могу понять, как сделать таблетки navbar динамически активными в соответствии с маршрутом.

1 Ответ

0 голосов
/ 27 февраля 2019

Этот фрагмент должен работать.

$(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();
        }
    });
});

И я не могу понять, как сделать таблетки Navbar динамически активными в соответствии с маршрутом.

RouterLinkActive сделает работу.

...