jQuery DocumentReady函数无法在后退按钮上的Angular 5中触发 - 需要jQuery函数始终在documentReady上触发

Question

我试图找出为什么我的Angular页面在单击后退按钮或从另一个页面导航到该页面时被破坏，所以我将此代码放在我的jQuery文件中。

$(function(){

  console.log("documentReady")

});

经过测试后我最初注意到火灾，页面按预期执行，我得到......

documentReady

但是当我导航到新页面时，然后单击后退按钮或单击页面链接，没有任何内容记录到控制台，页面看起来很糟糕。我的所有功能都没有执行。我是否需要在Angular 5中做一些不同的事情，以便在导航到页面时始终执行此jQuery，无论它是初始加载还是后续加载？

Answer 1

DOMContentLoaded事件未被触发的原因是Angular是构建SPA（单页面应用程序）的框架。这种应用程序的主要特征是页面（文档）只加载一次，然后通过javascript在不同页面之间导航，而不会触发任何事件，如DOMContentLoaded或onLoad。

解决方案是订阅路由器事件并在NavigationEnd事件上初始化您的脚本。

但是不建议在角度应用程序中使用jQuery库，因为角度变化检测圈不会对这些库所做的任何更改产生重大影响。

最好的选择是环顾一下你想要使用的第三方库是否已经实现了角度或自己实现（你甚至可以开源供其他人使用并改进它）。