Почему Jquery не загружается при смене маршрута в angular 7?

Question

У меня проблема при переходе между маршрутами с угловым 7, например... у меня есть этот код в моем app-component.html

<app-navbar *ngIf="currentUser"></app-navbar>
<router-outlet></router-outlet>
<app-footer *ngIf="currentUser"></app-footer>

Все на странице работает, <router-outlet></router-outlet> есть основной компонент для страницы, этот компонент имеет внутри другого компонента, <app-leftmenu></app-leftmenu> это боковая панель; Первоначально это был шаблон html-bootstrap 3, который я сегментировал для использования в angular cli.

Хорошо, причина этого вопроса в том, что SIDEBAR использует jquery для базовых действий, таких как свертывание и расширение, используя следующий код:

//
// Sidebar categories
//

// Hide if collapsed by default
$('.category-collapsed').children('.category-content').hide();


// Rotate icon if collapsed by default
$('.category-collapsed').find('[data-action=collapse]').addClass('rotate-180');


// Collapse on click
$('.category-title [data-action=collapse]').click(function (e) {
    e.preventDefault();
    var $categoryCollapse = $(this).parent().parent().parent().nextAll();
    $(this).parents('.category-title').toggleClass('category-collapsed');
    $(this).toggleClass('rotate-180');

    containerHeight(); // adjust page height

    $categoryCollapse.slideToggle(150);
});

Но не работает в угловом режиме, только когда я один раз перезагружаю компонент, если я перехожу на другой маршрут, боковая панель игнорирует jquery, но обновление страницы работает... как я могу решить эту проблему... без обновления? Спасибо за помощь!

Answer 1

Предположительно, потому что в то время, когда ваш код JQuery выполняется $('.category-collapsed')нет такого элемента.

Пытаться jQuery.on(), что позволяет позднее связывать: https://api.jquery.com/on/

Так это

$('.category-title [data-action=collapse]').click(fn)

становится (не проверено)

$(document).on('click', '.category-title [data-action=collapse]', fn)

Answer 2

Я настоятельно рекомендую использовать Angular-Bootstrap вместо ванильного решения javascript/jquery.

https://ng-bootstrap.github.io/

Эта библиотека предоставляет множество стандартных компонентов пользовательского интерфейса - интерфейсы с вкладками, раскрывающиеся списки, аккордеонные меню и т. Д. - все это как собственные компоненты Angular с полной поддержкой TypeScript.