angularjs - 在 angular 2 组件中使用 jquery/jqueryui 等库的正确方法

Question

我对这个主题进行了一些研究，发现了需要用于 typescript 的库的类型。我努力寻找的是使用示例，比如 angular 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

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

您需要在类上实现 AfterViewInit 并编写添加 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();
   } 
}