Angular 2 - 事件列表

时间:2016-01-21 16:00:41

标签: events angular

我是Angular 2的新手。从AngularJS到Angular 2的相应事件是什么? 例如:.page_source到(点击)

Selector和所有其他活动怎么样?我在VS .NET中没有intellisense,所以很难猜测。

请帮忙!

由于

5 个答案:

答案 0 :(得分:58)

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

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

只需删除on前缀即可。

onclick ---> (click)

onkeypress ---> (keypress)

等...

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

然而ngInit不是HTML事件,这是Angular组件生命周期的一部分,而在Angular 2中,它们是使用" hooks"来处理的,这基本上是特定的方法组件内部的名称,只要组件进入特定循环,就会调用这些名称。像:

ngOnInit

ngOnDestroy

等...

答案 1 :(得分:6)

这是Angular2的一大优势。并非每个事件都需要定制的ng-xxx指令 使用自定义元素和所有其他库生成各种自定义事件,这种方法无法实现。

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

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

另见https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

答案 2 :(得分:5)

以下是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()"

答案 3 :(得分:1)

您可以使用以下语法处理事件(例如click,例如ng-click和Angular1):

<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();
  }
}

希望它可以帮到你, 亨利

答案 4 :(得分:1)

开始理解Angular 2的好地方是官方网页。

Here你可以看到所有 angular2 / common ng-XXX虽然现在如下 ngXxxx

enter image description here

在我的例子中,了解Angular 1和Angular 2之间差异的最佳方法是进行教程: