使用角度2的HTML5事件處理（onfocus和onfocusout）

Question

我有一個日期字段，我想在默認情況下刪除佔位符。

我使用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); 
     } 
    } 

Answer 1

嘗試使用(focus)和(focusout)，而不是onfocus和onfocusout

這樣的： -

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

也可以使用這樣的： -

有些人喜歡on-prefix替代方案，稱爲規範形式：

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

瞭解更多的關於事件綁定see here。

你必須使用HostListner爲您的使用情況

角當主機元件發出指定的事件將調用裝飾方法。 @HostListener是回調/事件處理程序方法的裝飾器

查看我的更新工作Plunker。

工作實例Working Plunker