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

【问题标题】：jquery not finding items when routing in Angularjquery在Angular中路由时找不到项目
【发布时间】：2020-09-09 05:02:53
【问题描述】：

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

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 的目标对吧？

【问题讨论】：

console.log($(".skillbars"));看看你会得到什么。另外，如果您尝试在 ngAfterViewInit() 之后调用代码怎么办？尝试这样做。

标签： jquery angular typescript angular-lifecycle-hooks

【解决方案1】：

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

你不需要做这个document.ready。

【讨论】：

已解决。我需要 6 分钟才能将其标记为解决方案。
当然，在 Angular 代码中使用这样的 jquery 并不是一个好习惯。

【解决方案2】：

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

ngOnInit 可以用于当您想要对输入属性等进行处理时。视图在该状态下尚未准备好。

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

【讨论】：

【解决方案3】：

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

【讨论】：