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

Question

我有一个 Angular 2 组件，我想在其中检索一个元素 div <div id ="myId"> 通过它的 id。我尝试在我的组件 (TypeScript) 中执行：document.getElementById("myId")，但出现错误："cannot find name document"。我在其他帖子中看到我们可以使用 @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);
    }
  }

Kara Erickson 的

This blog post 是一本非常好的读物，可以帮助您熟悉 Angular 执行此类操作的方法。

Answer 2

将模板参考变量添加到您需要访问的元素：

<div #myDiv></div>

并且在组件中：

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

   constructor() {}

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

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

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

dom

angular2-template

angular2-components

angular