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

前端之家收集整理的这篇文章主要介绍了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();
   } 
}
原文链接:https://www.f2er.com/jquery/158834.html

猜你在找的jQuery相关文章