@HostListenerはHTML要素を返すことができますか？

Question

新しいディレクティブを作成する前に、この<input #inputBox (click)="getElement(inputBox)" element-directive/>を持ってinputBox要素を取得しました。

は今、私は指示にすべてを移動していると私は/リターンHTML要素へのアクセスを@HostListenerできます

input.directive.ts

@Directive({ 
    selector: '[element-directive]' 
}) 
@HostListener('click', ['$event']) 
public onClick($event) { 
    console.dir($event); // mouse click event, not html element 
} 

に私はinputBox要素を取得することができますどのように貼り付けられています？

Answer 1

あなたはネイティブのHTML要素にアクセスするには、ディレクティブのコンストラクタでElementRefを注入することができますhere

を見てください。

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[element-directive]' 
}) 
export class HighlightDirective { 
    private myDomEl; 
    constructor(el: ElementRef) { 
     this.myDomEl = el.nativeElement;   // <= native HTML INPUT element in your example, then use in on click event 
    } 
} 

あなたがいけないの