Seleccionando el elemento de plantilla y pasándolo a jQuery en un componente de Angular 2

Estoy tratando de averiguar cómo usar jQuery con Angular 2. He estado tratando de seguir el ejemplo a continuación que menciona que Angular debería controlar el DOM y que debo pasar el elemento a jQuery.

https://stackoverflow.com/a/30662773/657477

Creo que no estoy entendiendo cómo funciona @ViewChild().

Tengo un div en la plantilla de mi componente:

<div id="screenshot">
 // ... content here
</div>

Así que declaro jQuery como cualquier:

declare var $:any;

agrega esta propiedad:

@ViewChild('screenshot') el:ElementRef;

Y luego, para probar las cosas, simplemente intenta llamar a hide en ello en el ngAfterViewInit():

ngAfterViewInit() {
    $(this.el.nativeElement).hide();
}

Esto lanza la excepción:

No se puede leer la propiedad 'nativeElement' de indefinido

¿Entonces mi consulta de vista no está encontrando el elemento? Revisé la documentación de @ViewChild y parece que toma un componente anidado como parámetro. Creo que definitivamente estoy haciendo algo mal aquí.

Quiero poder realizar diversos trabajos con jQuery en el componente, así que necesito poder usar un selector y luego llamar al método de jQuery.

¿Estoy usando el enfoque incorrecto? ¿Cómo debería pasar un elemento a jQuery?

Respuesta #1

Se necesita hacer un pequeño cambio como se muestra a continuación,

<div #screenshot>          //replaced id="screenshot" by #screenshot
   // ... content here
</div>

@ViewChild('screenshot') el:ElementRef;