Question

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

starClick($event) {

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

我也很奇怪 - 根据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

由于tsconfig.json中的以下标志

，您收到此错误

“noImplicitAny”：true

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

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

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

对于（click）=“onClick（$ event）”应该在您的组件中捕获

onClick（事件：KeyboardEvent）

和

（mouseover）='onMouseOver（$ event）'应该被捕获为

onMouseOver（event：MouseEvent）

Answer 2

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

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

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

2 个答案: