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

【问题标题】：Angular 2: access an element from the Component, getDocumentById doesn't workAngular 2：从组件访问元素，getDocumentById 不起作用
【发布时间】：2017-07-24 07:51:40
【问题描述】：

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

【问题讨论】：

你能显示你的代码吗

标签： angular dom angular2-template angular2-components

【解决方案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 方法来执行此类操作。

【讨论】：

如果id是在*ngFor中动态生成的呢？
使用 index 属性，您可以将索引模板引用变量添加到使用 *ngFor 创建的元素
但是您也必须动态生成 @ViewChild(...) 注释，这是不可能的。如果不知道 *ngFor 列表的长度怎么办？

【解决方案2】：

将模板引用变量添加到您需要访问的元素中：

<div #myDiv></div>

在组件中：

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

   constructor() {}

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

【讨论】：

如果id是动态生成的呢？
@MarcinKapusta 不推荐使用 id，因为在像 Angular 这样的平台中，很难避免名称冲突（如果你有很多组件）。在什么情况下会动态生成id？标识符的所有要点都是唯一的和预期的。