私はAngular 2の初心者です。AngularJSからAngular 2に対応するイベントは何ですか?例:ng-click
to(クリック)
ng-init
およびその他すべてのイベントはどうですか? VS .NETにはインテリセンスがないので、推測するのは難しいです。
助けてください!
ありがとう
デフォルトで処理されるイベントは、元のHTML DOMコンポーネントのイベントからマッピングする必要があります。
http://www.w3schools.com/jsref/dom_obj_event.asp
on
プレフィックスを削除するだけです。
onclick
---> (click)
onkeypress
---> (keypress)
等...
カスタムイベントを作成することもできます。
ただし、ngInit
はHTMLイベントではありません。これはAngularのコンポーネントライフサイクルの一部であり、Angular 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()"
これは、Angular2の大きな利点の1つです。すべてのイベントがカスタマイズされたng-xxx
ディレクティブを必要とするわけではありません。
カスタム要素と、あらゆる種類のカスタムイベントを生成する他のすべてのライブラリでは、このアプローチはうまくいきません。
Angular2では、(eventName)="expression"
バインディング構文により、既知および未知のイベントをサブスクライブできます。
$event
変数はまだ利用可能です(eventName)="myEventHandler($event)"
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding も参照してください
Angular 2を理解し始めるのに最適な場所は、公式Webページです。
ここ すべてのangular2/commonng-XXXを見ることができますが、現在は次のようになっていますngXxxx
私の場合、Angular 1とAngular 2の違いを理解する最良の方法は、チュートリアルを実行することでした。
次の構文を使用してイベントを処理できます(たとえば、Angular1でng-click
のような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();
}
}
お役に立てばと思います、ティエリー