角度：ViewChildでnativeElementが未定義

Question

ViewChildを使用してコンポーネントのDOMにアクセスしたいとします。しかし、nativeElementプロパティにアクセスしようとすると、undefinedになります。

以下はスニペットです。

import { Component, ViewChild, AfterViewInit } from '@angular/core'; 
import { AlertComponent } from './alert.component'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <app-alert #alert>My alert</app-alert> 
     <button (click)="showAlert()">Show Alert</button>` 
}) 
export class AppComponent implements AfterViewInit { 
    @ViewChild('alert') alert; 

    showAlert() { 
    console.log('alert (showalert)', this.alert.nativeElement); 
    this.alert.show(); 
    } 

    ngAfterViewInit() { 
    console.log('alert (afterviewinit)', this.alert.nativeElement); 
    } 
} 

plunkをご覧ください。

Answer 1

あなたは、コンポーネントをホストするか、あなたがあなたの代わりにコンポーネントまたはディレクティブ

@ViewChild('alert', { read: ElementRef }) alert:ElementRef; 

も参照してくださいangular 2/typescript : get hold of an element in the template

の要素をしたいことを指定する必要がありますディレクティブ要素の参照を取得したい場合

あなたのケースでは、show()メソッドにアクセスできるようにコンポーネント参照用に2種類、DOM属性にアクセスできるように2種類必要です。

Plunker example