javascript – 在angular 2组件中使用像jquery / jqueryui这样的库的正确方法

我已经对这个主题进行了一些研究,并找到了需要用于打字稿的库的类型.我努力寻找的是使用示例,比如在角度2应用程序中的 jquery.

这里有一些问题：

1)在哪里编写他的jQuery代码,是在类的内部还是在该类的内部构造函数中？

2)我们是否需要在任何时候使用document.ready包装jQuery代码？即如果我们在构造函数中编写代码,它是否在此事件之后运行？

几个用法的例子,其中一个是正确的吗？

例1

export class MyApp {
   constructor() {
      $('.mydiv').hide();
   }
}

例2

export class MyApp {
   constructor() {
   }

   $('.mydiv').hide();
}

例3

export class MyApp {
   constructor() {
   }

   $( document ).ready(function() {
     $('.mydiv').hide();
   }
}

解决方法

理想情况下,您应该等到组件内容初始化,以便使DOM可用于您应用jQuery.为此你需要使用 hook of angular2 lifecycle之一的AfterViewInit.

您需要在类上实现AfterViewInit并编写add ngAfterViewInit方法以在组件内容准备好时获取通知.

import { AfterViewInit } from 'angular2/core';

export class MyApp implements AfterViewInit {
   constructor() {
   }

   ngAfterViewInit(){
       //here you will have code where component content is ready.
       $('.mydiv').hide();
   } 
}