web-dev-qa-db-ja.com

Angular 2：コンポーネントから要素にアクセスします。getDocumentByIdは機能しません

Idで要素div <div id ="myId">を取得するAngular 2コンポーネントがあります。コンポーネント（TypeScript）でdocument.getElementById("myId")を実行しようとしましたが、「名前ドキュメントが見つかりません」というエラーが表示されます。他の投稿で@ViewChildを使用して同様のことができることがわかりますが、divでこれをどのように使用できるかわかりません。

angulardomangular2-templateangular2-components
30
joeCarpenter

TemplateRef を追加することで、divで@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による、このようなことを行うためのAngularアプローチに精通するための非常に良い読み物です。

61
JayChase

アクセスする必要がある要素にテンプレート参照変数を追加します。

<div #myDiv></div>

そしてコンポーネントで：

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

   constructor() {}

   ngAfterViewInit() {
      console.log(this.myDiv);
   }
}
13
Seid Mehmedovic