2016-05-03 11 views
7

nadrzędna szablon:Jak bańka się angular2 niestandardowe zdarzenie

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

Drzewo poz szablon:

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

Na powyższym przykładzie, rodzic otrzymuje zdarzenie addChild tylko z korzenia drzewa-item (natychmiastowe dziecko) . Czy można zduplikować wydarzenie addChild z dowolnego elementu drzewa? Używam kątowej wersji 2.0.0-rc.0.

Odpowiedz

11

Zdarzenia z EventEmitter nie obsługują propagacji.

Możesz użyć element.dispatchEvent(), aby wystrzelić zdarzenie DOM, które się rozwija, lub użyć usługi wspólnej, takiej jak magistrala komunikatów.

Zobacz także https://angular.io/docs/ts/latest/cookbook/component-communication.html

+0

Czy obiekt JavaScript CustomEvent być wykorzystane? Czy istnieje przeciwnik tego? To nie jest tak naprawdę opisane w dokumentacji Angular. Być może dlatego, że odradzają dostęp do DOM bezpośrednio – Ryan

+0

To jest właśnie do 'element.dispatchEvent()'. Angular sugeruje używanie usługi wspólnej zamiast zdarzeń DOM. Zdarzenie DOM może spowodować, że wykrywanie zmian zostanie uruchomione dla całej aplikacji, podczas gdy usługa z obserwowalnym tylko spowoduje wykrywanie zmiany, które zostanie uruchomione dla komponentu, który subskrybuje obserwowalny. –

+0

@ GünterZöchbauer załóżmy, że mamy aplikację, w której kliknięcie prawym przyciskiem myszy na kotwice konkretnej klasy/selektora powinno wyświetlać niestandardowe menu kontekstowe. W jQuery, mielibyśmy coś w rodzaju '$ ('body'). On ('contextmenu', 'a.context', myFunction)' Wolałbym powiązać zdarzenie z treścią, a nie z tagiem. Mówisz, że to podejście nie jest możliwe w Angular2? – igasparetto

Powiązane problemy