web-dev-qa-db-fra.com

Angular 2 - Liste des événements

Je suis débutant dans Angular 2. Quels sont les événements correspondants de AngularJS à Angular 2?, Par exemple: ng-click cliquer)

Que diriez-vous ng-init et tous les autres événements? Je n'ai pas d'intellisense dans VS .NET, il est donc difficile à deviner.

Toute aide s'il vous plaît!

Merci

eventsangular
37
Omar AMRANI

Les événements gérés par défaut doivent être mappés à partir des événements du composant DOM HTML d'origine:

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

en supprimant simplement le préfixe on.

onclick ---> (click)

onkeypress ---> (keypress)

etc...

Vous pouvez également créer vos événements personnalisés.

Cependant, ngInit n'est pas un événement HTML, il fait partie du cycle de vie des composants angulaires et, en Angular 2, il est géré à l'aide de "points d'ancrage", qui sont des noms de méthodes spécifiques à l'intérieur votre composant qui sera appelé chaque fois que le composant entre dans le cycle spécifique.

ngOnInit

ngOnDestroy

etc...

61
Langley

Voici la liste des événements dans Angular Veuillez 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()"
8
Alok Panday

C'est l'un des gros avantages de Angular2. Tous les événements n’ont pas besoin d’un ng-xxx directive plus.
Avec les éléments personnalisés et toutes les autres bibliothèques produisant toutes sortes d'événements personnalisés, cette approche ne fonctionne pas.

Dans Angular2 the (eventName)="expression" La syntaxe de liaison permet de s'abonner à tout événement connu ou inconnu.

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

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

6
Günter Zöchbauer

Un bon endroit pour commencer à comprendre Angular 2 est la page Web officielle.

Ici vous pouvez voir tous les angular2/common ng-XXX bien que maintenant il se présente comme suit ngXxxx

enter image description here

Dans mon cas, le meilleur moyen de comprendre les différences entre Angular 1 et Angular 2 était de faire les tutoriels):

  • Tour of Heroes
  • Guide du développeur : Ceci est un guide pratique sur Angular) destiné aux programmeurs expérimentés qui créent des applications clientes en HTML et JavaScript.
1
Jorge Casariego

Vous pouvez utiliser la syntaxe suivante pour gérer les événements (par exemple, click comme ng-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 directement les événements DOM, mais également les événements personnalisés définis à l'aide de la classe EventEmitter.

Voici un exemple qui décrit comment gérer un événement click et un événement personnalisé (my-event) déclenchée par un sous-composant:

@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 ça vous aide, Thierry

1
Thierry Templier