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

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

理想情况下，您应该等到组件内容初始化，以便使您想要应用的 DOM 可用jQuery。为此你需要使用AfterViewInit这是其中之一Angular2生命周期的钩子 https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html.

你需要实施AfterViewInit在一个类上并写 addngAfterViewInit每当组件内容准备好时获取通知的方法。

import { AfterViewInit } from 'angular2/core';

export class MyApp implements AfterViewInit {
   constructor() {
   }

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