Gestione evento HTML5 (onfocus e onfocusout) utilizzando angolare 2

Question

Ho un campo data e desidero rimuovere il segnaposto per impostazione predefinita.

Sto usando JavaScript onfocus e onfocusout eventi per la rimozione di segnaposto.

Qualcuno può aiutare con l'utilizzo della direttiva angular2?

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

Provo a risolvere in questo modo, ma sto riscontrando problemi con il ripristino del tipo di campo di input.

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

Provare a usare (focus) e (focusout) invece di onfocus e onfocusout

in questo modo: -

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

inoltre è possibile utilizzare in questo modo: -

alcune persone preferiscono l'alternativa on-prefisso, nota come forma canonica:

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

Ulteriori informazioni su vincolante see here evento.

Devi usare HostListner per il vostro caso d'uso

angolare invocherà il metodo decorato quando l'elemento ospite emette l'evento specificato. @HostListener è un decoratore per il metodo callback/event handler

Vedere il mio aggiornamento Plunker funzionante.

esempio di lavoro Working Plunker