2017-06-13 18 views
2

私の主な懸念は$eventは、この行でエラーを示すことである 'あらゆる' タイプを持っていますまた、Angular2のドキュメントによれば、$eventはイベントオブジェクトをキャプチャしているので、私は愚かな質問をしましょう - なぜ我々は$objectと呼ばないのですか?私は、これは警告ではなくエラーであることを考える

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'stars', 
    template: ` 
     <span class="glyphicon glyphicon-star-empty" (click)= "starClick($event)"></span> 
    ` 
}) 

export class StarsComponent { 
    starClick($event) { 
    if($event.target.className == "glyphicon glyphicon-star-empty") { 
     $event.target.className = "glyphicon glyphicon-star"; 
    } 
    else{ 
     $event.target.className = "glyphicon glyphicon-star-empty"; 
    } 
    } 
} 
+0

あなたのケースの '$ event'にはMouseEvent型がありますが、これをメソッドに追加して警告を避けることができます。 – hiper2d

+1

'$ event'はEventEmitterから渡されます。 ObjectEmitterの場合は '$ object'になりますが、そうではありません。 – estus

答えて

9

内部$イベントをそれに名前を付けることを忘れないでくださいfig.json

"noImplicitAny":真

あなたがこの問題を解決するには2つの方法があります。(クリック)= "のonClick($イベント)" のために

1. "noImplicitAny": false //Make this false 

2. Mention the event type in component code, for eg. 

のonClick(イベント:KeyboardEventです)としてあなたのコンポーネントでキャプチャする必要があります

(マウスオーバー) = 'onMouseOver($ event)'は、

として表示されます。

onMouseOver(event:MouseEvent)

3

...それは私が最終的にここに起こっていただきまし実現するまで私はかなり混乱作られているので、おそらくあなたのコードエディタで見ていること。 $イベントは角の大会で、あなただけのようなHTMLでそれを使用する必要があります

starClick($event:any) { ... 

<input type="text" (yourCustomEvent)="onYourCustomEventHandle($event)"> 
をあなたは、単にようなあなたのパラメータの種類として いかなるを置くことによってこの問題を回避することができます

そして、あなたはこのようなtypescriptですコードに望むようにあなたはそれに名前を付けることができます。

onYourCustomEventHandle(apples){ ... } 

onYourCustomEventHandle(oranges){ ... } 

ちょうど私としてそれに名前を付けますあなたにとってもっと理にかなっています。 カスタムイベントを使用する場合は、$イベントを使用して、ハンドラにデータを渡します。

のような定期的なイベントでそれを使用する場合:

<button (click)="onClick($event)" (mouseover)='onMouseOver($event)'> 

単にあなたのコード内のパラメータとしてイベントオブジェクトを取得していますが、コードに望むように、再び、あなたはそれに名前を付けることができます。

onClick(myClickEvent){ ... } 
onClick(e){ ... } 
onMouseOver(event){ ... } 
onMouseOver(johnny){ ... } 

しかし、常にあなたがTSCONであるため、以下のフラグのこのエラーを取得しているHTML

関連する問題