Wie zu sprudeln angular2 benutzerdefiniertes Ereignis

Übergeordneten Vorlage:

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

Baum Element Vorlage:

<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>

Für das Beispiel oben, ein Elternteil erhält addChild Ereignis nur aus der root-tree-Element (sofortige Kind). Ist es möglich, Blasen zu bilden addChild Veranstaltung aus jedem tree-Element?
Ich bin mit Winkel-2.0.0-rc.0.

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

    Ereignisse aus EventEmitter unterstützen nicht sprudeln.

    Können Sie entweder element.dispatchEvent() Feuer ein DOM-Ereignis, die Blasen, oder das verwenden einer shared-service-wie ein Nachrichten-bus.

    Siehe auch https://angular.io/docs/ts/latest/cookbook/component-communication.html

    • Könnte ein JavaScript-CustomEvent Objekt verwendet werden? Gibt es eine con die pro dieser? Es ist nicht wirklich in der Angular-Dokumentation. Vielleicht, weil Sie die raten vor dem Zugriff auf die DOM-direkt
    • Das ist es, was element.dispatchEvent() ist für. Winkel schlägt vor, die Nutzung eines gemeinsamen Dienstes statt DOM-Ereignisse. Ein DOM-Ereignis verursachen können (change detection) für die ganze app, während ein Dienst mit einer beobachtbaren führt nur dazu, dass change detection) für die Komponente, die abonniert, um das zu beobachten.
    • nehmen wir an, wir haben eine Anwendung, wo das rechts-Klick auf den Anker von einer bestimmten Klasse/ - Selektor angezeigt werden sollen, die ein eigenes Kontext-Menü. In jQuery, hätten wir so etwas wie $('body').on('contextmenu', 'a.context', myFunction) würde ich eher binden Sie das Ereignis, um den Körper anstelle des a-Tags. Sie sagen, dass dieser Ansatz nicht möglich ist, in Angular2?
    • Wenn Sie hören, um ein bubbling-DOM-event, ist es egal wo man es hört, hat es die gleiche Wirkung überall. Wenn Sie ein benutzerdefiniertes Ereignis, dass Sie Feuer in Ihrem code, um einen gemeinsamen Dienst mit einer observable ist in der Regel die bessere option.
    • Gut, es hat funktioniert, weil Sie aufhören können, die Ausbreitung und dann kill die sprudelnde...
    • Natürlich gibt es Unterschiede. Was ich meinte ist von einem performance-Sicht (im Hinblick change detection).
    • Hast du ein Beispiel von dispatchEvent() überall? Ich schaute auf die Module Quelle in meinem Projekt, und Sie sind alle mit den systemeigenen new Event. Ich hatte erwartet, Winkel zu haben, die ähnliche Funktionalität wie jQuery in diesem Bereich: .on, .dispatch, die sehr nützlich sind.
    • Eckige nicht alles hier. Nur mit normal-TS/JS. stackoverflow.com/a/42064469/217408. Wenn Sie möchten, dass Ihr code plattformunabhängig (web-worker, universal, ... kannst du den renderer stackoverflow.com/questions/36342890/...)
    • Dies sollte nicht gekennzeichnet werden, wie die Antwort, denn es gibt nicht eine Lösung oder sogar die Beantwortung der Frage. Es ist einfach zu Antworten mit "EventEmitter nicht unterstützt, sprudeln', aber die Frage war ist es möglich, die Blase Ereignisse aus verschachtelten untergeordneten Komponenten - nicht, ob EventEmitter unterstützt sprudeln. Dereks Antwort unten gibt eine gültige Lösung für dieses problem, die nicht erforderlich ist, zusätzliche 'Leistungen' oder Herumspielen mit dem DOM.
    • Wie funktioniert element.dispatchEvent() keine Antwort auf die Frage? DOM-Ereignisse Blase, und Sie können hören Sie, wie die normalen Eckigen Veranstaltungen. Auch Eckige nicht bubble Veranstaltungen, weil es eine schlechte Idee, aus Gründen der Leistung und es gibt eine bessere Möglichkeit zur Kommunikation zwischen den Komponenten wie gemeinsame Dienste mit Observablen. Die verlinkte Seite geht in die details.

    InformationsquelleAutor Günter Zöchbauer
  2. 3

    Kam ich hier nach einer Lösung suchen, und ich fand einen auf meine eigenen. Auf Ihrem tree-item können Sie fügen Sie einen Ereignishandler wie folgt:

    <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>

    und in der Komponente.ts:

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

    Dadurch wird der event zu emittieren, die auf dem übergeordneten element, die vergeht, bis die Kette den ganzen Weg bis zum root-element. Sie können sogar benutzerdefinierte sprudelnden Logik, indem er die Veranstaltung, bevor Sie wieder Strahlen Sie.

    • Dies sollte die richtige Antwort, als er beantwortet die Frage mit einer Lösung eher als "EventEmitter" nicht unterstützen sprudeln.
    • Könnten Sie gelesen haben, mehr als die erste Zeile meiner Antwort vor und verurteilte es.
    InformationsquelleAutor Derek
Schreibe einen Kommentar