我是Angular 2的新手。从AngularJS到Angular 2的相应事件是什么?
例如:.page_source
到(点击)
Selector
和所有其他活动怎么样?我在VS .NET中没有intellisense,所以很难猜测。
请帮忙!
由于
答案 0 :(得分:58)
默认处理事件应该从原始HTML DOM组件的事件中映射:
http://www.w3schools.com/jsref/dom_obj_event.asp
只需删除on
前缀即可。
onclick
---> (click)
onkeypress
---> (keypress)
等...
您还可以创建自定义事件。
然而ngInit
不是HTML事件,这是Angular组件生命周期的一部分,而在Angular 2中,它们是使用" hooks"来处理的,这基本上是特定的方法组件内部的名称,只要组件进入特定循环,就会调用这些名称。像:
等...
答案 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
在我的例子中,了解Angular 1和Angular 2之间差异的最佳方法是进行教程: