Qu'est-ce exactement $objet d'événement ne Angulaire 2?
Je suis un peu confus quoi exactement $de l'événement 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) {
}
}
Sous le capot Angulaire utilise un param appelé $event et littéralement des copies de votre rappel code
Nous ne faisons généralement pas passer
Vous devez passer l '"événement" de l'argument de l'élément de l'attribut
clicked($event)
, de sorte que le $événement est codé en dur à cette valeur. Il ressemble à ceci self.parentView.context.clicked($event)
. Si vous utilisez un nom personnalisé au lieu de $event, dire event123
, Angulaire va vérifier componentInstance.event123 de la propriété et de la valeur - qui sera probablement nulle/non défini. C'est le même comportement à l'aide en ligne HTML gestionnaires <input type="button" onclick="clickHandler(event)" >
où seul le texte exact event
peut être utiliséNous ne faisons généralement pas passer
event
argument comme une partie de la valeur de l'attribut, mais le gestionnaire n'ont que l'argument function clickHandler(event){..}
(si nécessaire). Je pense que l'OP devrait savoir, la façon dont les événements de travail dans les DOM, comme indiqué iciVous devez passer l '"événement" de l'argument de l'élément de l'attribut
onclick="clickHandler(event)"
, ou l'événement ne sera pas transmis au gestionnaire dans le fichier JS. plnkr.co/modifier/9oOCztMuaq7rkowdHsGT?p=preview Qui lie très étroitement avec la façon Angulaire est de se comporter dans ce casOriginalL'auteur Sarvesh Yadav | 2016-06-21
Vous devez vous connecter pour publier un commentaire.
$event
est l'événement lui-même.La liaison des événements
(someevent)
permet de se lier à des événements DOM et àEventEmitter
événements. La syntaxe est exactement la même.Pour les événements DOM
$event
est leMouseEvent
,KeyboardEvent
, ou la valeur de l'événement du type d'activités que vous écoutez.Pour
EventEmitter
événements de la valeur émise est disponible en$event
En supposant que cet exemple
$event
se réfère à l'émiseFerrari
voiture exemple:Si vous n'utilisez pas
$event
comme dans(click)="clicked()"
alors la valeur de l'événement n'est pas passé.Effectivement aussi loin que je m'en souviens est encore passé dans certains navigateurs, mais pas dans tous (ne me souviens pas lesquels)
Mais si vous utilisez Angulars WebWorker, votre méthode pourrait ne pas obtenir le tiré ou émis événement si vous ne spécifiez pas explicitement liste.
$event
est l'un des types d'événements(UIEvent
/MouseEvent
) dans ce hiérarchie. Est-ce exact?Dans le navigateur, il est
MouseEvent
pour(click)
, pour les sorties, il peut être n'importe quel type.click= f()
En HTML avec JavaScript, nous n'avons pas de passevent
dans le gestionnaire. Mais la définition du gestionnaire de n'avoir le paramètre.function f(e){.... }
OriginalL'auteur Günter Zöchbauer
Si vous ne passez pas le
$event
dans votre modèle, alors vous n'aurez pas le$event
variable dans votreclicked()
méthode disponible.Haha, ça à l'époque. En regardant la valeur par défaut Plunker SystemJS
config.js
il semble, qu'il utilise toujours le plus courant Angulaire 2 version. Où avez -bootstrap
déplacer? Je n'ai pas suivi le TS de développement pour un moment depuis que je suis passé à la version Dart. Grâce à zoechi pour éclairer moi 😀OriginalL'auteur rinukkusu