2016-03-13 2 views
29

Если у меня есть следующие кнопки в HTML файлтипа Что Машинопись является Angular2 событие

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

Кроме того, в соответствующем компоненте, у меня есть эта функция

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

Есть ли правильный тип, должен быть назначен на вход $ event? Параметр событие само по себе является объектом, но если я назначу его к объекту типа, я получаю сообщение об ошибке

Property 'stopPropogation' does not exist on type object 

Итак, что же Машинопись рассмотреть события ввода $?

+2

'doSomething (testString: string, event: MouseEvent)' –

+0

Eric Martinez: Можете ли вы выслать свой комментарий в качестве ответа? Это очистило все флаги, которые я получал, поэтому я считаю это правильным. –

ответ

25

Как было предложено @AlexJ

событие вы прошли через $event является DO M, поэтому вы можете использовать EventName как тип.

В вашем случае это событие MouseEvent, и документы, говорит, цитируя

интерфейс MouseEvent представляет события, которые происходят из-за пользователя, взаимодействующего с указательным устройством (например, мыши). Общие события, использующие этот интерфейс, включают в себя: клик, dblclick, mouseup, mousedown.

Во всех этих случаях вы получите MouseEvent.

Другой пример: если у вас есть этот код

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

Когда событие вызывает вы получите FocusEvent.

Таким образом, вы можете сделать это очень просто, утешать войти событие, и вы увидите сообщение, подобное этому, что будет у нас название события

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

Вы всегда можете посетить документы для список существующих Events.

Редактировать

Вы также можете проверить машинопись dom.generated.d.ts со всеми типизации портированы. В вашем случае stopPropagation() является частью Event, дополненной MouseEvent.

0

Я уверен, что проблема не связана с вашим кодом. Я думаю, что что-то с вашей настройкой не так.

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

производит этот выход

тестирование: Я делаю что-то VM1901 app.ts transpiled: 26MouseEvent {isTrusted: правда, ScreenX: 2878, Screeny: 504, clientX: 67, clientY: 73 ...}

Смотрите также https://plnkr.co/edit/xxaQbh?p=preview

1

Согласно официальным event имеет тип Object, и в моем случае, когда я typecaste event к объекту он does't бросить какую-либо ошибку, но после прочтения документации по angular2 найден event имеет типа EventEmitter, так что вы можете ввести касту вашего события в EventEmitter

видит здесь plunkr для того же http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

для получения дополнительной информации см здесь https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Смежные вопросы