質問

日付フィールドがあるのですが、デフォルトでプレースホルダーを削除したいです。

私はjavascriptを使用しています onfocus と onfocusout イベントがあります。

angular2ディレクティブの使用について、どなたか助けてください。

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">

この方法で解決しようとしましたが、入力フィールドのタイプがリセットされる問題が発生しました。

import { Directive, ElementRef, Input } from 'angular2/core';
@Directive({
    selector: '.dateinput', 
    host: {
    '(focus)': 'setInputFocus()',
    '(focusout)': 'setInputFocusOut()',
  }})

  export class MyDirective {
      constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}

      setInputFocus(): void {
        //console.log(this.elementRef.nativeElement.value);
      }
  }

どのように解決するのですか？

以下のように (focus) と (focusout) の代わりに onfocus であり onfocusout

このように : -

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

のような使い方もできます。

のような、接頭辞のついた形式を好む人もいます。

<input name="date" type="text" on-focus="focusFunction()" on-focusout="focusOutFunction()">

イベントバインディングについてもっと知る はこちらをご覧ください。 .

HostListnerを使用する必要があります。

Angularは、ホスト要素が指定されたイベントを発すると、装飾されたメソッドを呼び出します。 @HostListener はコールバック/イベントハンドラメソッド用のデコレータです。

私のUpdate working Plunkerを参照してください。

動作例 作業用スタックブリッツ

更新情報

その他のイベントは、angular - で使用することができます。

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"