navigationend - router events subscribe angular 4

Angular 2: accede a un elemento desde el Componente, getDocumentById no funciona

Question

Tengo un componente Angular 2 donde quiero recuperar un elemento div <div id ="myId"> por su id. Intento hacer: document.getElementById("myId") en mi componente (TypeScript), pero document.getElementById("myId") un error: "no puedo encontrar el documento de nombre". Veo que en otras publicaciones podemos hacer algo similar usando @ViewChild, sin embargo, no veo cómo podemos usar esto con un div, ¿alguna idea?

Answer 1

Agregue una variable de referencia de plantilla al elemento al que necesita acceder:

<div #myDiv></div>

Y en el componente:

class MyComponent implements AfterViewInit {
@ViewChild(''myDiv'') myDiv: ElementRef;
constructor() {}
ngAfterViewInit() {
console.log(this.myDiv);
}
}

Answer 2

Puede usar @ViewChild con un div agregando un TemplateRef .

Modelo

 <div id ="myId" #myId>

Componente

 import { Component, ViewChild, ElementRef, AfterViewInit } from ''@angular/core'';
@Component({
selector: ''app-root'',
templateUrl: ''./app.component.html'',
styleUrls: [''./app.component.css'']
})
export class AppComponent implements AfterViewInit {
@ViewChild(''myId'') myId: ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this.myId.nativeElement);
}
}

Esta publicación del blog de Kara Erickson es una muy buena lectura para familiarizarse con el enfoque Angular para hacer cosas como esta.