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

Question

我的 angular 组件中有以下代码，即 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，因为它以前不起作用。现在它适用于页面加载。但是当我做路由时它没有。我知道脚本是运行ning，我得到打印 "Animation skillbar inside 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() 中。将使用所有绑定初始化视图的位置。有关详细信息，请查看 link https://angular.io/api/core/AfterViewInit.

您不需要这样做document.ready。

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

jquery not finding items when routing in Angular

jquery

typescript

angular

angular-lifecycle-hooks