使用2角组件内像jQuery / jQueryUI的库的正确方法 [英] Correct way to use libraries like jquery/jqueryui inside angular 2 component

问题描述

我已经研究这个话题了一下，发现了分型为需要用于打字稿库。我在努力寻找的用法示例，可以说jQuery的角2应用程序中。

这里有一些问题：

1）凡将一个写他的jQuery code，它是内部类或内部该类构造？

2）我们需要使用的document.ready在任何时候换行jQuery的code？也就是说，如果我们写的内部构造code是此事件之后运行？

用法的几个例子，这些是正确的吗？

例1

 出口类的MyApp {
   构造函数（）{
      $（'。mydiv'）隐藏（）。
   }
}
 

例2

 出口类的MyApp {
   构造函数（）{
   }   $（'。mydiv'）隐藏（）。
}
 

例3

 出口类的MyApp {
   构造函数（）{
   }   $（文件）。就绪（函数（）{
     $（'。mydiv'）隐藏（）。
   }
}
 

解决方案

在理想情况下，你应该等到成分含量得到初始化，以使DOM可以在你想申请的jQuery 。对于您需要使用 AfterViewInit 是的 的STRONG>挂钩。

您需要执行 AfterViewInit 一类，并用添加 ngAfterViewInit 方法来获得通知，只要成分含量已经准备好了

 进口{} AfterViewInit从'angular2 /核心;出口类实现的MyApp {AfterViewInit
   构造函数（）{
   }   ngAfterViewInit（）{
       //这里你将有code其中成分含量已准备就绪。
       $（'。mydiv'）隐藏（）。
   }
}
 

I have researched this topic a bit and found out about typings for libraries that need to be used for typescript. What I struggled to find is examples of usage, lets say for jquery inside an angular 2 application.

here are some questions:

1) Where would one write his jQuery code, is it inside class or inside constructor of that class?

2) Do we need to use document.ready at any point to wrap jQuery code? i.e. if we write code inside constructor is it run after this event?

few examples of usage, is one of these correct?

example 1

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

example 2

export class MyApp {
   constructor() {
   }

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

example 3

export class MyApp {
   constructor() {
   }

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

解决方案

Ideally you should wait till component content get initialized, in order to make the DOM available on which you wanted to apply jQuery. For that you need to use AfterViewInit which is one of hook of angular2 lifecycle.

You need to implement AfterViewInit on a class and write add ngAfterViewInit method to get notify whenever component content gets ready.

import { AfterViewInit } from 'angular2/core';

export class MyApp implements AfterViewInit {
   constructor() {
   }

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

这篇关于使用2角组件内像jQuery / jQueryUI的库的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！