javascript - 为什么在 Angular 7 中更改路线时 Jquery 不加载？

Question

例如，当我在 Angular 为 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);
});

但不能以 Angular 工作，只有当我重新加载一次组件时，如果我导航到其他路线，侧边栏会忽略 jquery，但刷新页面有效...我如何解决这个问题...没有刷新？感谢您的帮助!

Answer 1

大概是因为在你的 jQuery 代码执行 $('.category-collapsed') 时，没有这样的元素。

尝试 jQuery.on()，它允许稍后绑定(bind):https://api.jquery.com/on/

所以这个

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

成为(未经测试)

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