Angular2 - 参数 $event 隐式具有 'any' 类型

Question

我主要担心的是 $event 在这一行显示错误：

starClick($event) {

Parameter $event implicitly has 'any' type

我也想知道 - 根据 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";
    }
  }
}

Answer 1

我认为这是一个警告而不是错误，您可能会在代码编辑器中看到这一点。您可以简单地通过将 any 作为参数类型来避免这种情况，例如：

starClick($event:any) { ...

$event 是 Angular 的约定，您应该只在 HTML 中使用它，例如：

<input type="text" (yourCustomEvent)="onYourCustomEventHandle($event)">

您可以在打字稿代码中随意命名，如下所示：

onYourCustomEventHandle(apples){ ... }

onYourCustomEventHandle(oranges){ ... }

只要给它命名，因为它对你来说更有意义。使用自定义事件时，您使用 $event 将数据传递给您的处理程序。

将其与常规事件一起使用时，例如：

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

您只需在代码中获取事件对象作为参数，但同样您可以在代码中随意命名它：

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

但不要忘记在 HTML

中始终将其命名为 $event

Answer 2

您收到此错误是因为 tsconfig.json

中的以下标志

"noImplicitAny": true

您有 2 种方法可以解决此问题。

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

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

For (click)="onClick($event)" 应该在您的组件中捕获为

onClick（事件：KeyboardEvent）

和

(mouseover)='onMouseOver($event)' 应该被捕获为

onMouseOver（事件：MouseEvent）

Answer 3

我遇到了同样的问题，我通过更改以下代码解决了这个问题：starClick($event: any)。这是它的样子：

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: any) {
    if($event.target.className == "glyphicon glyphicon-star-empty") {
      $event.target.className = "glyphicon glyphicon-star";
    }
    else{
      $event.target.className = "glyphicon glyphicon-star-empty";
    }
  }
}

Angular2 - 参数 $event 隐式具有 'any' 类型

Angular2 - Parameter $event implicitly has 'any' type

events

angular2-forms

angular