Question

我正在阅读Angular 2文档where I found：

传递$ event不是一个好习惯

键入事件对象会显示出对传递事件的重要反对意见   整个DOM事件进入方法：组件有太多的意识   的模板细节。它无法在不知情的情况下提取信息   关于HTML实现应该超过它。这打破了   模板之间的关注点分离（用户看到的）和   组件（应用程序如何处理用户数据）。

出于某种原因，我无法完全理解它所说的内容。似乎在任何地方都没有任何解释。

有人可以用更简单的术语解释这个的确切含义（如果可能，请举例）？

Answer 1

查看文档之前和之后已经提供的示例：

@Component({
  selector: 'key-up1',
  template: `
    <input #box (keyup)="onKey($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v1 {
  values = ''; 

  onKey(event: KeyboardEvent) {
    this.values += (<HTMLInputElement>event.target).value + ' | ';
  }
}

这里组件必须知道事件有一个目标，它是一个输入元素，它有一个值。现在v2：

@Component({
  selector: 'key-up2',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v2 {
  values = '';

  onKey(value: string) {
    this.values += value + ' | ';
  }
}

这里模板负责从自己的结构中提取正确的值，并且所有组件都知道它正在获取一个字符串。现在想象一下：

您需要将input元素更改为select，以限制输入范围。每个版本有什么变化？只是模板，或组件是否也必须改变？
您想测试处理方法。每个版本有多容易？你能传递一个字符串，还是必须用适当结构的元素构建一个事件？

这就是关注点分离的真正含义 - 变化传播到底有多远？您的系统的每个部分需要知道多少其他部分才能继续工作？每Wikipedia，例如：

特别有价值的是稍后改进或修改一个部分的能力代码而不必知道其他部分的细节，以及无需对这些部分进行相应的更改。

但是，正如snorkpete所示，请注意，只有当$event引用DOM事件时，才会将$event传递给组件方法。在您使用EventEmitter举办自己的活动的情况下，$event（很可能）将成为商业领域的对象，完全可以按原样使用。

为什么在Angular中传递$事件（处理DOM事件时）是一种可疑的做法

1 个答案: