jquery - jquery在Angular中路由时找不到项目

Question

我在内部运行的角度组件中有以下代码ngOnInit()：

animateMobileSkillBar() : void {
    console.log("Animation skillbar out");
    $( document ).ready(function() {
      console.log("Animation skillbar inside document ready");
      $(".skillbars").each(function() {
        console.log("Animation skillbar for each skillbar");
        // The stuff I need to do...
      }
    }
}

我添加了，$(document).ready因为它以前不起作用。现在它适用于页面加载。但是当我做路由时它没有。我知道脚本正在运行，并且打印出“文档内的动画技能栏已准备就绪”。所以出于某种原因，问题是$(".skillbars").each()。

为什么这不起作用？我觉得好像skillbars还没有准备好，但那是document.ready正确的目标？

Answer 1

将代码放在 ngAfterViewInit() 中，以便加载 HTML

Answer 2

检查https://angular.io/guide/lifecycle-hooks。

ngOnInit当你想用输入属性等做一些事情时可以使用。视图在那个状态下还没有准备好。

尝试把它 - 没有 document.ready 的东西 - 在ngAfterViewInit.

Answer 3

您可以将您的实现移动到 ngAfterViewInit() 中。视图将使用所有绑定进行初始化。有关更多信息，请查看链接 https://angular.io/api/core/AfterViewInit。

你不需要做这个文档。准备好了。