2016-03-13 19 views
29

Wenn ich die folgende Schaltfläche in einer HTML-DateiWas Typoskript Typ ist Angular2 Ereignis

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

Auch habe, in der entsprechenden Komponente, habe ich diese Funktion

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

Gibt es eine richtige Art, die sollte dem $ event Eingang zugewiesen werden? Der Ereignisparameter selbst ein Objekt ist, aber wenn ich es auf einen Typ Objekt zuweisen, erhalte ich einen Fehler

Property 'stopPropogation' does not exist on type object 

Also, was macht Typoskript den $ Ereigniseingang in Betracht ziehen?

+2

'doSomething (testString: Zeichenfolge, Ereignis: MouseEvent)' –

+0

Eric Martinez: Können Sie Ihren Kommentar als Antwort posten? Das hat alle Flaggen geklärt, die ich bekam, also nehme ich es als korrekt an. –

Antwort

25

von @AlexJ vorgeschlagen Als

Das Ereignis, das Sie durch $event vergangen ist ein DO M Ereignis, daher können Sie den Typ EventName verwenden.

In Ihrem Fall ist diese Veranstaltung ein MouseEvent, und die docs sagt, zitiert

Die Mouseevent Interface Ereignisse darstellt, die mit einem Zeigegerät (zB eine Maus) die Interaktion mit dem Benutzer aufgrund auftreten. Häufige Ereignisse, die diese Schnittstelle verwenden, sind click, dblclick, mouseup, mousedown.

In all diesen Fällen erhalten Sie eine MouseEvent.

Ein anderes Beispiel: Wenn Sie diesen Code haben

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

Wenn das Ereignis löst es eine FocusEvent zu bekommen.

So können Sie es ganz einfach tun, trösten die Veranstaltung anmelden und Sie erhalten eine Nachricht ähnlich wie diese sehen, dass wir den Ereignisnamen für ein

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

Sie können jederzeit besuchen Sie die Dokumentation haben Liste der bestehenden Events.

bearbeiten

Sie auch für Typoskript dom.generated.d.ts mit allen Typisierungen portiert überprüfen. In Ihrem Fall ist stopPropagation() Teil von Event, erweitert um MouseEvent.

0

Ich bin mir sicher, dass das Problem nicht mit Ihrem Code zusammenhängt. Ich schätze mal etwas mit deiner Einrichtung stimmt nicht.

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

erzeugt diese Ausgabe

Test: Ich tue etwas VM1901 app.ts transpiled: 26MouseEvent {IsTrusted: true, screenX: 2878, screenY: 504, clientX: 67, clientY: 73 ...}

Siehe auch https://plnkr.co/edit/xxaQbh?p=preview

1

nach offiziellen event ist vom Typ Object, auch in meinem Fall, wenn ich typecaste event zum Objekt es einen Fehler werfen does't, aber nach Dokumentation von angular2 Lesen gefunden event vom Typ EventEmitter so können Sie Ihre Veranstaltung in EventEmitter

hier sehen Kasten Typ ist plunkr für die gleiche http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

für weitere Informationen hier https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding siehe