为什么Jquery在角度7改变路线时不加载？

Posted 2021-04-04

我在使用角度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模板，我分段用于角度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，但刷新页面工作...我如何解决这个...没有刷新？谢谢您的帮助！

答案

大概是因为当时你的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)

另一答案

我强烈建议使用Angular-Bootstrap而不是vanilla javascript / jquery解决方案。

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

该库提供了各种标准UI组件 - 选项卡式界面，下拉菜单，手风琴菜单等，所有这些都是具有完全TypeScript支持的原生Angular组件。