почему 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

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

https://ng -bootstrap.github.io / # / дом

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

Answer 2

Предположительно, потому что во время выполнения вашего кода 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)