Angular 2: access an element from the Component, getDocumentById doesn't work

Question

I have an Angular 2 component where I want to retrieve an element div

by its id. I try doing: document.getElementById(\"myId\")

相关标签:

Answer 1

Add Template Reference variable to the element you need access to:

<div #myDiv></div>

And in the component:

class MyComponent implements AfterViewInit {
   @ViewChild('myDiv') myDiv: ElementRef;

   constructor() {}

   ngAfterViewInit() {
      console.log(this.myDiv);
   }
}

Answer 2

You can use @ViewChild with a div by adding a TemplateRef.

Template

    <div id ="myId" #myId>

Component

  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);
    }
  }

This blog post by Kara Erickson is a really good read for getting familiar with the Angular approach to doing things like this.