Angular 2：从组件访问元素，getDocumentById 不起作用

Question

我有一个角度2个组件，我想检索元素div <div id ="myId">通过其ID。我尝试做：document.getElementById("myId")在我的组件（Typescript）中，但是我会遇到一个错误："找不到名称文档"。我看到，在其他帖子中，我们可以使用@ViewChild做类似的事情，但是我看不出如何将其与Div一起使用，任何想法？

Answer 1

您可以通过添加templateref使用@viewchild。

模板

    <div id ="myId" #myId>

组件

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

卡拉·埃里克森（Kara Erickson）的这篇博客文章是一本非常好的读物，因为它熟悉了这样做的角度方法。

Answer 2

添加模板参考变量您需要访问：

<div #myDiv></div>

和组件中：

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