web-dev-qa-db-fra.com

Passer les paramètres avec EventEmitter

J'ai une directive pour initialiser un jQueryUI pouvant être trié sur un élément DOM. Le jQueryUI sortable a également un ensemble d'événements de rappel qui se déclenchent sur certaines actions. Par exemple, lorsque vous débutez ou arrêtez éléments de tri.

J'aimerais passer les paramètres de retour d'un tel événement via la fonction emit(), afin que je puisse réellement voir ce qui est arrivé dans ma fonction de rappel. Je n'ai simplement pas trouvé le moyen de passer des paramètres à travers un EventEmiiter.

J'ai actuellement le suivant.

Ma directive:

@Directive({
    selector: '[sortable]'
})
export class Sortable {
    @Output() stopSort = new EventEmitter();

    constructor(el: ElementRef) {
      console.log('directive');
        var options = {
          stop: (event, ui) => {
            this.stopSort.emit(); // How to pass the params event and ui...?
          }
        };

        $(el.nativeElement).sortable(options).disableSelection();
    }
}

Et voici mon Component qui utilise l'événement émis par la directive:

@Component({
  selector: 'my-app',
  directives: [Sortable],
  providers: [],
  template: `
    <div>
      <h2>Event from jQueryUI to Component demo</h2>

      <ul id="sortable" sortable (stopSort)="stopSort(event, ui)">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      </ul>
    </div>
  `
})
export class App {
  constructor() {

  }

  stopSort(event, ui) { // How do I get the 'event' and 'ui' params here?
    console.log('STOP SORT!', event);
  }
}

Comment puis-je obtenir les paramètres event et ui dans ma fonction stopSort()?

Voici une démo de ce que j'ai jusqu'à présent: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

angulareventemitterangular2-directives
48
Vivendi

EventEmitter prend en charge un argument, qui est transmis sous la forme $event à votre gestionnaire d’événements.

Enveloppez vos paramètres dans un objet événement lorsque vous le transmettez à emit:

this.stopSort.emit({ event:event, ui: ui });

Ensuite, lorsque vous gérez l'événement, utilisez $event:

stopSort($event) { 
  alert('event param from Component: ' +$event.event);
  alert('ui param from Component: ' + $event.ui);
}

Démo Plnkr

100
pixelbits

la réponse de pixelbits a un peu changé avec la version finale. Si vous avez plusieurs paramètres, transmettez-le comme un seul objet.

Composant enfant:

this.stopSort.emit({event,ui});

@Output() stopSort= new EventEmitter<any>();

Composant parent:

hereIsHeight(value) {
        console.log("Height = " + value.event); 
        console.log("Title = " + value.ui); 
    }

HTML dans le composant parent:

<test-child1 (stopSort)="hereIsHeight($event)"></test-child1>

- Aussi si vous avez des valeurs comme: (avec le "this" devant)

this.stopSort.emit({this.event,this.ui});

ils ne fonctionneront pas, vous devez les changer pour autre chose et ensuite passer comme:

let val1 = this.event;
let val2 = this.ui;
this.stopSort.emit({val1,val2});

* Mise à jour: lisez la réponse de Colin B ci-dessous pour savoir comment passer des valeurs avec "this."

14
Alfa Bravo

Je ne peux pas ajouter de commentaire, mais je tenais simplement à souligner, d'après la réponse d'Alpha Bravo, que vous pouvez passer this.event, Vous ne pouvez tout simplement pas utiliser la sténographie de la propriété:

this.stopSort.emit({ event : this.event, ui : this.ui });

Notez également que s'ils sont passés à travers EventEmmiter en tant que this.stopSort.emit({ val1, val2 });, ils seront alors accédés dans le parent en tant que:

hereIsHeight(value) {
    console.log(`event = ${ value.val1 }`); 
    console.log(`ui = ${ value.val2 }`); 
}

Il serait donc préférable d’éviter l’abréviation dans ce type de situation pour que les noms soient cohérents.

5
Colin B.

Fonctionne comme ça chez l'enfant:

@Output() myEvent: EventEmitter<boolean> = new EventEmitter();
myFunc(value: boolean) {
this.myEvent.emit(value);
}

Il ne reste plus qu’à saisir l’événement chez le parent!

3
Ignacio Peletier