EventEmitter und Rekursion

Question

Wenn ich eine Vorlage mit Selektor 'recursive-element' und seine Vorlage sieht wie folgt aus

<li *ngFor="let x of y" (click)="greet($event)"> 
    <div *ngIf="x.children"> 
     <recursive-element [y]="x.children"></recursive-element> 
    </div> 
</li> 

und in classs habe ich

definiert

greetEvent = new EventEmitter(); 
greet(e){ 
    greetEvent.emit("hello world!"); 
    e.stopPropagation(); 
} 

und in einer anderen Komponente i hinzugefügt, um es zB Tempalte

hi(x){ 
    alert(x) 
} 

, wenn ich auf der verschachtelten recurive-element auf das Ereignis nicht ausgelöst, aber wenn ich auf den ersten li Element klicken tut es

es wegen der Rekursion ist so auch nur zum ersten rekursiven Element nicht die verschachtelte eine gebunden oder ist es etwas, was ich missverstanden habe?

Answer 1

Benutzerdefinierte Ereignisse in angular2 sind nicht bubbled up so können Sie entweder:

1. das übergeordnete Ereignis auf <recursive-element> emittieren, wenn man das Kind ein Ereignis abgibt - das ein neues EventEmitter pro Kind schaffen.

In diesem Fall wird die untergeordnete Komponente so sein sollte:

@Component({ 
    selector: 'recursive-comp', 
    template: ` 
     <div> 
     <div *ngFor="let item; of tree;"> 
     <a href="#" (click)="onClick(item)">{{item.name}}</a> 
     <recursive-comp *ngIf="item.children" [tree]="item.children" (clickEvent)="onClickChild($event)"></recursive-comp> 
     </div> 
     </div> 
    ` 
}) 
export class RecursiveCmp { 
    @Input() tree = null; 
    @Output() clickEvent = new EventEmitter(); 

    constructor() { 

    } 

    onClick(item) { 
     console.log("clicked", item); 
     this.clickEvent.emit(item); 
    } 

    onClickChild(item) { 
     this.clickEvent.emit(item); 
    } 
} 

diese plunker for event per child

siehe

2. einen Dienst erstellen, der die EventEmitter halten und wird von Eltern und Kindern benutzt werden. Damit dies funktioniert, sollte der Dienst ein Singleton sein und daher die beste Option wäre, den Provider unter bootstrap Zeit zu registrieren.

dies ist der Service-Code:

@Injectable() 
export class ClickerService { 
    clickEvent = new EventEmitter(); 

    clicked(item) { 
    this.clickEvent.emit(item); 
    } 
} 

Und das Kind Komponente:

@Component({ 
    selector: 'recursive-comp', 
    template: ` 
    <div> 
     <div *ngFor="let item; of tree;"> 
     <a href="#" (click)="onClick(item)">{{item.name}}</a> 
     <recursive-comp *ngIf="item.children" [tree]="item.children"></recursive-comp> 
     </div> 
    </div> 
    ` 
}) 
export class RecursiveCmp { 
    @Input() tree = null; 
    constructor(private clickerService: ClickerService) {} 

    onClick(item) { 
    this.clickerService.clicked(item); 
    } 
} 

sehen diese plunker for service event