web-dev-qa-db-fra.com

Quel type TypeScript est l'événement Angular2

Si j'ai le bouton suivant dans un fichier html

<button (click)="doSomething('testing', $event)">Do something</button>

En outre, dans le composant correspondant, j'ai cette fonction

doSomething(testString: string, event){
    event.stopPropagation();
    console.log(testString + ': I am doing something');
}

Existe-t-il un type approprié à attribuer au $event contribution? Le paramètre event lui-même est un objet, MAIS si je l'assigne à un objet type, j'obtiens une erreur

La propriété 'stopPropogation' n'existe pas sur l'objet type

Alors, qu'est-ce que TypeScript considère comme le $event contribution?

javascripttypescriptangular
62
Alex J

Comme suggéré par @AlexJ

L'événement que vous avez transmis via $event Est un événement DOM. Par conséquent, vous pouvez utiliser EventName comme type.

Dans votre cas, cet événement est un MouseEvent , et la documentation indique en citant

L’interface MouseEvent représente les événements qui se produisent du fait que l’utilisateur interagit avec un périphérique de pointage (tel qu'une souris). Les événements courants utilisant cette interface incluent click, dblclick, mouseup, mousedown .

Dans tous ces cas, vous aurez un MouseEvent.

Autre exemple: si vous avez ce code

<input type="text" (blur)="event($event)"

Lorsque l'événement se déclenche, vous obtenez un FocusEvent .

Donc, vous pouvez le faire très simplement, consignez l’événement par la console et vous verrez un message semblable à celui-ci avec le nom de l’événement.

FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}

Vous pouvez toujours consulter la documentation pour obtenir une liste des événements existants Events .

Modifier

Vous pouvez également vérifier TypeScript dom.generated.d.ts avec tous les typings portés. Dans votre cas, stopPropagation() fait partie de Event , étendu de MouseEvent.

52
Eric Martinez

Selon le fonctionnaire event est de type Object, également dans mon cas lorsque je tape _secule event dans Object, il ne génère aucune erreur, mais après avoir lu la documentation de angular2 trouvée event est de type EventEmitter afin que vous puissiez taper caste votre événement dans EventEmitter

voir ici est plunkr pour le même http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

pour plus d'informations, voir ici https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

2
Pardeep Jain