Angular 2 : access an element from the Component, getElementById 不起作用

Question

我有一个 Angular 2 组件，我想在其中检索元素 div <div id ="myId">通过它的ID。我尝试做:document.getElementById("myId")在我的组件(TypeScript)中，但出现错误:“找不到名称文档”。我在其他帖子中看到我们可以使用 @ViewChild 做类似的事情，但是我不知道我们如何将它与 div 一起使用，有什么想法吗？

Answer 1

您可以通过添加 TemplateRef 将 @ViewChild 与 div 一起使用.

模板

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

This blog post Kara Erickson 的著作非常适合熟悉 Angular 方法来执行此类操作。