angular2ディレクティブ内のDOMオブジェクトを取得する方法

Question

ディレクティブから要素を取得しようとしましたが、その上でCSSの変更を行っていました。しかし、常に

nativeElement is undefinedが、私は両方の方法を試してみました私に言っている：

1. は

2. は、それらの両方が動作していない

を@ContentChild @ViewChild。

私の親HTML：

<div class="col-lg-12 module_style" id="module-wrapper"> 
    <div class="col-lg-12"> 
     <p class="left-alignment"> 
      <b><i class="fa fa-file-text fa-lg" aria-hidden="true"></i> Market Category: </b> 
      {{item.marketCategory}} 
     </p> 
     <p class="right-alignment" id="moduleCog" [moduleOpt]="item"> 
      <i class="fa fa-cog fa-lg" aria-hidden="true"></i> 
     </p> 
     <module-modal #moduleModal [data]="item"></module-modal> 
    </div> 
    <div class="col-lg-12"><p class="left-alignment">{{item.source}} <i class="fa fa-long-arrow-right fa-lg" aria-hidden="true"></i> {{item.target}}</p></div> 
</div> 

子のhtml： "モジュール峰"

<div id="modal-container"> 
    <div class="modal-background"> 
    <div class="modal"> 
     <h2>I'm a Modal</h2> 
     <p>Hear me roar.</p> 
    </div> 
    </div> 
</div> 

マイ指令：

import { Directive, ElementRef, Input, Renderer, ViewChild, HostListener, OnInit, ContentChild } from '@angular/core'; 

@Directive({ 
    selector: '[moduleOpt]' 
}) 

export class ModuleOptDirective implements OnInit{ 
    showModal: boolean = false; 
    @Input('moduleOpt') moduleOpt: any; 
    @ContentChild('moduleModal') moduleModal: ElementRef; 
    //@ViewChild('moduleModal') moduleModal: ElementRef; 
    constructor(private _renderer: Renderer) {} 

    ngOnInit() { 

    } 

    @HostListener('click', ['$event']) 
    showDetails(event) { 
     console.log(event); 
     console.log(this.moduleOpt); 
     this._renderer.setElementClass(this.moduleModal.nativeElement, 'modal-animate', true); 

    } 

} 

誰かがこれで私を助けてもらえますか？問題

this._renderer.setElementClass(this.moduleModal.nativeElement, 'modal-animate', true); 

this.moduleModal.nativeElementがnativeElement の間違った使い方ですが見つかり

Answer 1

はthis.moduleModal判明代わりthis.moduleModal.nativeElementを使用し、私は次のように使用している必要があります... nullではない：

... 
export class ModuleOptionComponent implements OnInit { 
    @Input('item') item: any; 
    //@ViewChild('moduleModal') moduleModal: ElementRef 

    constructor(
     private _renderer: Renderer, 
     private _elem: ElementRef 
    ) {} 

    ngOnInit() { 
    } 

    @HostListener('click', ['$event']) 
    showDetails(event) { 
     this._renderer.setElementClass(this._elem.nativeElement, 'modal-animate', true); 

    } 
} 

このこのディレクティブを適用したDOMオブジェクトのみを選択します。