Angular 2-Liste des événements

C'est l'un des grands avantages de L'Angular2. Pas tous les besoins d'événement personnalisé ng-xxx directive plus.

Avec des éléments personnalisés et toutes les autres bibliothèques produisant toutes sortes d'événements personnalisés, cette approche ne fonctionne pas.

en Angular2 le (eventName)="expression" la syntaxe de liaison permet de s'abonner à n'importe quel événement connu et inconnu.

$event variable est toujours disponible (eventName)="myEventHandler($event)"

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

Voici la liste des événements dans Angulaire S'il vous plaît vérifier la documentation si nécessaire pour plus d'informations

(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()"

Vous pouvez utiliser la syntaxe suivante pour gérer les événements (par exemple,clickng-click avec Angular1):

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

La différence ici est que c'est plus générique. Je veux dire que vous pouvez utiliser des évènements DOM directement mais aussi des évènements personnalisés définis en utilisant le EventEmitter classe.

Voici un exemple qui explique comment gérer un click événement et un événement personnalisé (my-event) déclenché par un sous-élément:

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

J'espère que cela vous aidera, Thierry

un excellent endroit pour commencer à comprendre Angular 2 est la Page Web officielle.

Ici vous pouvez voir tous les angular2 / commun ng-XXX bien que maintenant, il est comme suit ngXxxx

dans mon cas, la meilleure façon de comprendre les différences entre Angular 1 et Angular 2 était de faire les tutoriels:

• Tour de Les héros
• Le Guide Du Développeur: ceci est un guide pratique à L'Angular pour les programmeurs expérimentés qui construisent des applications client en HTML et JavaScript.