Angular 2 - 事件列表

Question

我是Angular 2的新手。AngularJS中对应的事件是什么？例如：ng-click变成了什么？

ng-init和其他所有事件呢？在VS .NET中没有智能提示，所以很难猜测。

请帮帮我！

谢谢

- Omar AMRANI

Answer 1

默认处理的事件应该从原始HTML DOM组件的事件中映射：

http://www.w3schools.com/jsref/dom_obj_event.asp

只需删除 on 前缀。

onclick ---> (click)

onkeypress ---> (keypress)

等等...

您也可以创建自定义事件。

但是，ngInit不是HTML事件，它属于Angular的组件生命周期的一部分，在Angular 2中使用“钩子”来处理它们，这基本上是您组件内特定方法名称，每当组件进入特定周期时，将调用该方法。例如：

ngOnInit

ngOnDestroy

等等...

- Langley

---

默认处理的事件应该从原始的HTML DOM组件的事件映射过来。很抱歉，我无法提供官方的 Angular 2 事件列表，因为我是一款语言模型，我的知识截止到2021年9月1日，而Angular 2 是在此之前发布的版本。 - Sir4ur0n

这是一个更完整的 DOM事件清单。 - kbtz

这里是另一个检查的地方：https://developer.mozilla.org/zh-CN/docs/Web/Events - Belter

@Langley，你有Angular特定事件的完整列表链接吗？例如ngOnInit和ngOnDestroy。 - Socrates

哇，最受欢迎的答案并不完全准确，可能会对许多用户产生误导作用，所以让我解释一下我的意思。onclick是JavaScript DOM事件，而click是原始HTML DOM事件。因此，它并不完全是onclick - > click，而是简单地click - >（点击）。 - Ganesh Kodiganti

Answer 2

以下是Angular中的事件列表，请如有需要查看文档获取更多信息。

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"

- Alok Panday

---

这个列表是从哪里来的？你所指的文档是什么？ - BillyTom

@BillyTom 的文档链接是：https://www.positronx.io/useful-list-of-angular-7-event-types-for-event-binding/ - Parth Developer

实际上还有很多很多。请参见此处：https://developer.mozilla.org/zh-CN/docs/Web/Events - Marco

Answer 3

这是Angular2的一个重要优势之一。不再需要定制ng-xxx指令来处理每个事件。
随着自定义元素和其他各种库产生的所有自定义事件，这种方式已经行不通了。

在Angular2中，(eventName)="expression"绑定语法允许订阅任何已知和未知事件。

$event变量仍然可用，如(eventName)="myEventHandler($event)"

还可以参见https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

- Günter Zöchbauer

---

$event 是什么类型？在 .ts 文件中，有没有预定义的事件可以使用，而不是使用任何事件？ - EugenSunic

这取决于eventName。对于DOM事件，您可以从mdn（例如'click' https://developer.mozilla.org/en-US/docs/Web/Events/click）获取信息；如果它来自Angular指令或组件，则可以从其文档中获取信息。 - Günter Zöchbauer

Answer 4

开始了解 Angular 2 的好地方是官方网页。在这里，你可以看到所有的 angular2/common ng-XXX，尽管现在它们被改成了ngXxxx。

在我的情况下，理解Angular 1和Angular 2之间的差异最好的方法是通过做教程：

• 英雄之旅
• 开发者指南：这是一份针对有经验的HTML和JavaScript客户端应用程序开发人员的实用Angular指南。

- Jorge Casariego

Answer 5

您可以使用以下语法来处理事件（例如像Angular1中的ng-click）：

<button (click)="callSomeMethodOfTheComponent()">Click</button>

这里的区别在于更加通用。我的意思是，你可以直接使用 DOM 事件，也可以使用使用 EventEmitter 类定义的自定义事件。

以下是一个示例，描述如何处理由子组件触发的 click 事件和自定义事件（my-event）。

@Component({
  selector: 'my-selector',
  template: `
    <div>
      <button (click)="callSomeMethodOfTheComponent()">Click</button>
      <sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
    </div>
  `,
  directives: [SubComponent]
})
export class MyComponent {
  callSomeMethodOfTheComponent() {
    console.log('callSomeMethodOfTheComponent called');
  }
}

@Component({
  selector: 'sub-component',
  template: `
    <div>
      <button (click)="myEvent.emit()">Click (from sub component)</button>
    </div>
  `
})
export class SubComponent {
  @Output()
  myEvent: EventEmitter;

  constructor() {
    this.myEvent = new EventEmitter();
  }
}

希望它对你有所帮助，Thierry。

- Thierry Templier