Question

我已经对这个主题进行了一些研究，并找到了需要用于打字稿的库的类型。我努力寻找的是使用示例，比如在角度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();
   }
}

Answer 1

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

您需要在类上实现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();
   } 
}

Answer 2

我将首先回答你的第二个问题。是的，您应该使用document.ready，因为它的目的是等到DOM加载。如果没有加载，你的jQuery代码将无法正常工作。

现在回答你的第一个问题，一旦加载，你调用jQuery的地方就不重要了。

请参阅this。

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

2 个答案: