web-dev-qa-db-fra.com

Angular2 EventEmitter et preventDefault ()

Angular2 existe-t-il un moyen d’empêcher d’une manière ou d’une autre la valeur par défaut pour les événements utilisant EventEmitter?

J'ai le scénario suivant:

import {Component, Output, EventEmitter} from 'angular2/core'

@Component({
  selector: 'my-component',
  template: `<button (click)="clickemitter.emit($event); onClick($event)" [style.color]="color"><ng-content></ng-content></button>`
})
export class MyComponent {
  @Output clickemitter: EventEmitter<MouseEvent> = new EventEmitter();

  private color: string = "black";

  constructor() {

  }

  private onClick(event: MouseEvent): void {
    if(!event.defaultPrevented) //gets called before the observers of clickemitter
      this.color = "red";
    else this.color = "blue";
  }
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <my-component (clickemitter)="$event.preventDefault()">Hello Angular</my-component>
  `,
  directives: [MyComponent]
})
export class App {
  constructor() {

  }
}

J'ai aussi créé un Plunker pour cela: https://plnkr.co/edit/yIoF1YgvkiZLBPZ6VHT?p=preview

Le problème Si je clique sur le bouton, la couleur du bouton ne deviendra pas bleue comme il le devrait, mais elle devient rouge à la place . Cela peut être dû au fait que EventEmitter.emit ()/next () semblent fonctionner de manière asynchrone. J'ai essayé de résoudre ce problème en abonnant également ma méthode onClick () à l'émetteur et en appelant simplement clickemitter.emit ($ event)} dans le gestionnaire d'événements de mon bouton (clic). Cela fonctionnerait pour la démonstration Plunker quand je l’ai fait dans ngAfterInit (). Mais que se passe-t-il si quelqu'un s'abonne plus tard au clickemitter? Mon composant serait appelé à nouveau avant cet observateur et mon composant serait incohérent.

La question Comment puis-je m'assurer que mon gestionnaire de composant onClick () sera appelé à la toute dernière minute afin de garantir qu'aucun autre observateur ne pourra empêcher le comportement par défaut par la suite? Ou y a-t-il une manière complètement différente d'atteindre mon objectif?

angularpreventdefaulteventemitter
9
seraph

Pour résoudre ce problème, utilisez ceci dans votre modèle html

<button (click)="clickemitter(a,b,c); $event.stopPropagation();" 
        [style.color]="color" >
        <ng-content></ng-content>
</button>

As $event.stopPropagation(); permet d'arrêter l'événement de clic par défaut et que votre bouton n'appelle que l'événement écrit dans (click)="....", qui est clickemitter.emit(a,b,c).

Peut-être que cette aide est complète pour vous. Je vous remercie.

12
Jatin Roy

Il suffit d'utiliser return false;
voici le code que j’ai utilisé pour prevent default 

  @HostListener('click') open(){
      this._isOpen = !this._isOpen;
      return false;
  }

Et pour stopPropagation 

 @HostListener('click', ['$event'])
 onClick(e) {
  alert("we have performed click");
  e.stopPropagation();
 }
5
Rajesh Patel

J'ai implémenté event.preventDefault comme ceci

export class ObserveComponent{
   onSubmit(event:Event){
     event.preventDefault();
  }
}

page arrêtée recharger chaque fois que j'ai essayé d'accéder à la valeur d'une clé qui n'existe pas dans l'objet

0
Sandeep Chikhale