web-dev-qa-db-fra.com

Que fait exactement l'événement $ event dans Angular 2?

Je suis un peu confus sur ce que fait exactement $ event ici et quelle est la différence entre ces deux exemples

<button (click)="clicked($event)"></button>

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

et

<button (click)="clicked()">Click</button>



 @Component(...)
    class MyComponent {
      clicked(event) {
      }
    }
typescriptangularevent-handling
25
Sarvesh Yadav

$event est l'événement lui-même.

La liaison d'événement (someevent) permet de se lier aux événements DOM et aux événements EventEmitter. La syntaxe est exactement la même.

Pour les événements DOM $event est MouseEvent, KeyboardEvent ou la valeur d'événement du type de l'événement que vous écoutez.

Pour les événements EventEmitter, la valeur émise est disponible sous la forme $event

En supposant que cet exemple $event fait référence à l'instance de voiture Ferrari émise:

@Output() carChange:EventEmitter<Car> = new EventEmitter<Car>();

someMethod() {
  this.carChange.emit(new Car({name: 'Ferrari'}));
}

Si vous n'utilisez pas $event comme dans (click)="clicked()" alors la valeur de l'événement n'est pas transmise.

En fait, pour autant que je m'en souvienne est toujours passé dans certains navigateurs mais pas dans tous (je ne me souviens pas lesquels)

Mais si vous utilisez la fonction Angulars WebWorker, votre méthode risque de ne pas obtenir l'événement déclenché ou émis si vous ne le répertoriez pas explicitement.

26
Günter Zöchbauer

Si vous ne passez pas le $event Dans votre modèle, alors vous n'aurez pas la variable $event Dans votre méthode clicked() disponible.

Voir ceci Plunker pour une comparaison rapide

3
rinukkusu