web-dev-qa-db-ja.com

Angular 2-イベントのリスト

私はAngular 2の初心者です。AngularJSからAngular 2に対応するイベントは何ですか？例：ng-click to（クリック）

ng-initおよびその他すべてのイベントはどうですか？ VS .NETにはインテリセンスがないので、推測するのは難しいです。

助けてください！

ありがとう

eventsangular
37
Omar AMRANI

デフォルトで処理されるイベントは、元のHTML DOMコンポーネントのイベントからマッピングする必要があります。

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

onプレフィックスを削除するだけです。

onclick ---> (click)

onkeypress ---> (keypress)

等...

カスタムイベントを作成することもできます。

ただし、ngInitはHTMLイベントではありません。これはAngularのコンポーネントライフサイクルの一部であり、Angular 2では「フック」を使用して処理されます。コンポーネントは特定のサイクルに入ります。好む：

ngOnInit

ngOnDestroy

等...

61
Langley

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()"
8
Alok Panday

これは、Angular2の大きな利点の1つです。すべてのイベントがカスタマイズされたng-xxxディレクティブを必要とするわけではありません。
カスタム要素と、あらゆる種類のカスタムイベントを生成する他のすべてのライブラリでは、このアプローチはうまくいきません。

Angular2では、(eventName)="expression"バインディング構文により、既知および未知のイベントをサブスクライブできます。

$event変数はまだ利用可能です(eventName)="myEventHandler($event)"

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding も参照してください

6
Günter Zöchbauer

Angular 2を理解し始めるのに最適な場所は、公式Webページです。

ここ すべてのangular2/commonng-XXXを見ることができますが、現在は次のようになっていますngXxxx

enter image description here

私の場合、Angular 1とAngular 2の違いを理解する最良の方法は、チュートリアルを実行することでした。

1
Jorge Casariego

次の構文を使用してイベントを処理できます（たとえば、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();
  }
}

お役に立てばと思います、ティエリー

1
Thierry Templier