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.