typescript - ¿Angular2 y los plugins de jQuery funcionan juntos perfectamente?

Al intentar integrar plugins de jQuery con Angular 2, tenemos tres escenarios:

1. ONLOAD: iniciar el complemento al cargar la página, lo cual funciona muy bien con el siguiente código:

ngAfterViewChecked(){
    ...
    $('#somedatatable1').DataTable()
    ...
}

2. ONCLICK: iniciar el plugin al hacer clic, recuperando el HTML generado por el servidor (sé que el HTML no debería transferirse en JSON, solo los datos, pero esto es lo que tengo) y pasándolo a la página, y luego iniciar el plugin DataTable en esos datos:

componentemayor.ts

clickDatatableParse(){
    this.http.get(this.jsonUrl)
        .map(res => res.json()) 
        .subscribe(
            data => { 
                this.data = data
            },
            err => console.log(err),
            () => console.log("fetched!")
        )
}

maincomponent.html

<div id="contents" [innerHTML]="data?.htmltable">

Salida HTML ANALIZADA después de que los datos son recuperados y analizados

<div id="contents">
    <div id="somedatatable2">
        ....
    </div>
</div>

La pregunta es dónde colocar "$ ('.somedatatable2').datatables();" para que funcione correctamente. Entonces, todo necesita ser recuperado y analizado completamente, y luego llamar al plugin de jQuery sobre ello, entonces funcionará.

3. ONCLICK SUBCOMPONENT es cuando hago clic, el subcomponente se está activando

componentemayor.ts

clickDatatableParse(){
    this.http.get(this.jsonUrl)
        .map(res => res.json()) 
        .subscribe(
            data => { 
                this.data = data
            },
            err => console.log(err),
            () => console.log("fetched!")
        )
}

maincomponent.html

<div id="subcomponent" [htmldata]="data?.htmltable">

subcomponente.html

<div id="subcomponentbody" [innerHTML]="htmldata">
    ....
</div>

Salida HTML ANALIZADA después de que los datos son recuperados y analizados

<div id="subcomponentbody">
    <div id="somedatatable3">
        ....
    </div>
</div>

subcomponente.ts

ngAfterViewChecked(){
    ...
    $('#somedatatable3').DataTable()
    ...
}

La pregunta es si esto es algo que debería funcionar? Supongo que iniciar el plugin en el subcomponente vía ngAfterViewChecked es una mejor opción o no?

La pregunta es cómo incluir correctamente un plugin de jQuery. Creo que debería importar el plugin mediante "import * as Datatables from 'jquery-datatables'" y "npm install jquery-datatables --save" antes de eso, y luego simplemente poner el archivo .css del plugin en los styleUrls de @component: ['datatables.css','main.css']. ¿Es esta la manera correcta de hacerlo?

Respuesta #1

He usado el hook ngAfterViewInit y funciona de maravilla. Puede surgir un problema cuando Angular manipula el DOM. Una solución a ese problema sería actualizar la tabla cada vez que Angular manipula el DOM llamando a $ ("#sometable").DataTable()