Gestion des événements HTML5 (onfocus et onfocusout) en utilisant angular 2

J’ai un champ de date et je veux supprimer le titulaire par défaut.

J’utilise des événements javascript onfocus et onfocusout pour supprimer un espace réservé.

Quelqu’un peut-il aider à utiliser la directive angular2?

 

J’essaie de résoudre de cette façon, mais j’ai un problème avec la réinitialisation du type de champ d’entrée.

 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); } } 

Essayez d’utiliser (focus) et (focusout) au lieu de onfocus et onfocusout

comme ça : –

  

vous pouvez aussi utiliser comme ceci: –

certaines personnes préfèrent l’alternative on-prefix, connue sous le nom de forme canonique:

  

En savoir plus sur la liaison aux événements, voir ici .

vous devez utiliser HostListner pour votre cas d’utilisation

Angular invoquera la méthode décorée lorsque l’élément hôte émet l’événement spécifié. @HostListener est un décorateur pour la méthode de rappel / gestionnaire d’événements

Voir ma mise à jour en travaillant sur Plunker.

Exemple de travail Working Plunker

Si vous souhaitez capturer l’événement focus de manière dynamic sur chaque entrée de votre composant:

 import { AfterViewInit, Component, ElementRef } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements AfterViewInit { constructor(private el: ElementRef) { } ngAfterViewInit() { // document.getElementsByTagName('input') : to gell all Docuement imputs const inputList = [].slice.call((this.el.nativeElement).getElementsByTagName('input')); inputList.forEach((input: HTMLElement) => { input.addEventListener('focus', () => { input.setAtsortingbute('placeholder', 'focused'); }); input.addEventListener('blur', () => { input.removeAtsortingbute('placeholder'); }); }); } } 

Consultez le code complet ici: https://stackblitz.com/edit/angular-93jdir