Comment bulle jusqu'angular2 événement personnalisé

Modèle Parent:

<ul>
   <tree-item [model]="tree" (addChild)="addChild($event)"></tree-item>
</ul>

Des éléments de l'arborescence du modèle:

<li>
  <div>{{model.name}}
    <span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Child</span>
  </div>
  <ul *ngFor="let m of model.children">
    <tree-item [model]="m"></tree-item>
  </ul>
</li>

Pour l'exemple ci-dessus, le parent reçoit addChild événement uniquement à partir de la racine de l'arbre-élément (immédiat de l'enfant). Est-il possible de remonter jusqu'addChild événement à partir de n'importe quel arbre-élément?
Je suis à l'aide angulaire 2.0.0-rc.0.

InformationsquelleAutor Mario G. | 2016-05-03
  1. 14

    Événements de EventEmitter ne supportent pas de bulles.

    Vous pouvez soit utiliser element.dispatchEvent() à feu d'un DOM événement bulles, ou de l'utilisation d'un service partagé comme un bus de message.

    Voir aussi https://angular.io/docs/ts/latest/cookbook/component-communication.html

    • Pourrait un JavaScript CustomEvent objet-ils être utilisés? Est-il un con pour le pro de la ce? Ce n'est pas vraiment couvert dans l'angle de la documentation. Peut-être parce qu'ils déconseillons l'accès au DOM directement
    • C'est ce que element.dispatchEvent() est pour. Angulaire suggère d'utiliser un service partagé au lieu d'événements DOM. Un DOM l'événement peut provoquer la détection de changement de courir pour l'ensemble de l'application, tandis qu'un service avec une observable que les causes de la détection de changement de courir pour le composant qui s'abonne à l'observable.
    • supposons que nous avons une application où le clic droit sur les ancrages d'une classe spécifique de sélection devrait afficher un menu contextuel personnalisé. En jQuery, on aurait quelque chose comme $('body').on('contextmenu', 'a.context', myFunction) je préfère lier l'événement pour le corps au lieu de la balise. Vous dites que cette approche n'est pas possible dans Angular2?
    • Si vous écoutez un bouillonnement d'événements DOM, il n'importe pas où vous l'écoutez, il a le même effet partout. Si vous utilisez un événement personnalisé que vous le feu dans votre code, un service partagé avec une observable est généralement la meilleure option.
    • Bien, c'est parce que vous pouvez arrêter la propagation et ensuite de tuer le bouillonnement...
    • Bien sûr il y a des différences. Ce que je voulais dire, c'est à partir d'un point de vue des performances (en ce qui concerne la détection de changement).
    • Avez-vous un exemple de dispatchEvent() n'importe où? J'ai regardé les modules source dans mon projet et ils sont tous à l'aide de la maternelle new Event. Je m'attendais Angulaire avoir les mêmes fonctionnalités que celui de jQuery dans ce domaine: .on, .dispatch, ce qui est extrêmement utile.
    • Angulaire de ne pas avoir quoi que ce soit ici. Utilisez simplement la plaine TS/JS. stackoverflow.com/a/42064469/217408. Si vous souhaitez conserver votre code de la plate-forme neutre (web travailleur, universel, ... vous pouvez utiliser le moteur de rendu stackoverflow.com/questions/36342890/...)
    • Cela ne devrait pas être marqué comme réponse qu'il n'est pas de donner une solution ou même répondre à la question. C'est tout simplement la réponse avec "EventEmitter ne prend pas en charge le bouillonnement", mais la question était est-il possible de bulle événements de imbriqués les composants enfants - pas si EventEmitter soutient que la garniture bouillonne. Dereks réponse ci-dessous donne une solution valable à ce problème qui n'a pas besoin d'autres "services" ou de déconner avec le DOM.
    • Comment element.dispatchEvent() pas répondre à la question? DOM événements de la bulle internet, et vous pouvez les écouter comme d'habitude Angulaire des événements. Aussi Angulaire n'est pas de bulle d'événements, car il est considéré comme une mauvaise idée pour des raisons de performances et il y a une meilleure façon de communiquer entre les composants tels que les services partagés avec les phénomènes Observables. La page va dans les détails.

    InformationsquelleAutor Günter Zöchbauer
  2. 3

    Je suis venu ici à la recherche d'une solution, et j'ai trouvé sur mon propre. Sur votre tree-item, vous pouvez ajouter un gestionnaire d'événements comme:

    <li>
  <div>{{model.name}}
    <span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Child</span>
  </div>
  <ul *ngFor="let m of model.children">
    <tree-item [model]="m" (yourEventEmitter)="handleEventBubble($event)"></tree-item>
  </ul>
</li>

    et dans votre composant.ts:

    handleEventBubble(event): void {
  this.yourEventEmitter.emit(event);
}

    Ce sera la cause de l'événement à émettre sur l'élément parent, qui passe jusqu'à la chaîne tout le chemin jusqu'à l'élément racine. Vous pouvez même définir un bouillonnement de la logique par la transformation de l'événement avant de ré-émission.

    • Cela devrait être la bonne réponse car il répond à la question avec une solution plutôt que de 'EventEmitter' ne supporte pas de bulles.
    • Vous avez pu lire que la première ligne de ma réponse avant de la dénoncer.
    InformationsquelleAutor Derek