Modo corretto per utilizzare librerie come jquery/jqueryui all'interno del componente angolare 2

Question

Ho ricercato un po 'questo argomento e ho scoperto le tipizzazioni per le librerie che devono essere utilizzate per il dattiloscritto. Quello che ho faticato a trovare sono esempi di utilizzo, diciamo per jquery all'interno di un'applicazione angolare 2.

Ecco alcune domande:

1) Dove si potrebbe scrivere il suo codice jQuery, è dentro di classe o all'interno del costruttore della classe?

2) È necessario utilizzare document.ready in qualsiasi momento per includere il codice jQuery? Ad esempio, se scriviamo il codice nel costruttore, viene eseguito dopo questo evento?

alcuni esempi di utilizzo, uno di questi è corretto?

esempio 1

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

esempio 2

export class MyApp { 
    constructor() { 
    } 

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

esempio 3

export class MyApp { 
    constructor() { 
    } 

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

Answer 1

Idealmente si dovrebbe aspettare fino a quando il contenuto del componente non viene inizializzato, al fine di rendere disponibile il DOM su cui si desidera applicare jQuery. Per questo è necessario utilizzare AfterViewInit, che è uno di hook of angular2 lifecycle.

È necessario implementare AfterViewInit in una classe e scrivere il metodo di aggiunta ngAfterViewInit per ottenere la notifica ogni volta che il contenuto del componente è pronto.

import { AfterViewInit } from 'angular2/core'; 

export class MyApp implements AfterViewInit { 
    constructor() { 
    } 

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