Wie behandelt man Ereignisse in verschachtelten rekursiven Komponente

Question

Ich versuche, eine Baumkomponente zu erstellen, in der od-tree-node Komponente rekursiv verschachtelt ist, um untergeordnete Knoten zu erstellen. Ich habe Probleme mit der Behandlung von Ereignissen. Bei Klickereignissen auf dem Blattknoten wird das Mausereignis immer so ausgelöst, als ob das Ereignis an der obersten Komponente aufgetreten wäre. Ich bin mir nicht sicher, wie ich damit umgehen soll.

Das erwartete Verhalten: Wenn der Benutzer auf leaf/parent/root klicken, muss die übergeordnete Komponente (z. B. app.component.ts) wissen, auf welchen Knoten geklickt wurde.

Stromverhalten: Unabhängig davon, welcher Knoten angeklickt wird, wird der Wurzelknoten ausgewählt (emittiert Mutterkomponente)

Plunker: https://plnkr.co/edit/JZTlA5?p=preview

Hier ist die Vorlage:

node.component .html

<!-- parent node --> 
<label [attr.for]="resource.resourceType" [class]="cssClasses" *ngIf="resource.hasChildren()" [hidden]="matchedChildrenCount(search, resource) === 0"> 
    <a (click)="toggleNode($event)"> <i [class]="getNodeStateIcon()"></i></a> 
    <input type="checkbox" *ngIf="showCheckboxes" [checked]="selected"> 
    <a [title]="resource.resourceName" (click)="selectNode($event);"> 
     <i [class]="resource.getIcon()"></i> {{resource.resourceName}} | {{ matchedChildrenCount(search, resource) | lpad : 2 : '0'}} 
    </a> 
</label> 
<!-- leaf node --> 
<label [attr.for]="resource.resourceType" [class]="cssClasses" *ngIf="!resource.hasChildren()" [hidden]="!isMatched(search, resource)"> 
    <input type="checkbox" *ngIf="showCheckboxes" [checked]="selected"> 
    <a [title]="resource.resourceName" (click)="selectNode($event);"> 
     <i class="icon-status-indicator"></i> {{resource.resourceName}} 
     <div class="group" *ngIf="resource?.group !== 'Default'">{{resource.group}}</div> 
    </a> 
</label> 
<!-- recrusive child nodes --> 
<ul *ngIf="resource.expanded"> 
    <li *ngFor="let child of resource?.children"> 
    <od-tree-node 
     [resource]="child" 
     [search]="search" 
     (selected)="selectNode($event)" 
     ></od-tree-node> 
    </li> 
</ul> 

node.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'od-tree-node', 
    templateUrl: 'node.component.html', 
    styleUrls: ['node.component.css'], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class NodeComponent implements OnInit, OnChanges, OnDestroy { 
    @Input() resource: TreeNode; 

    @Output() selected = new EventEmitter<TreeNode>(); 

    cssClasses: string; 

    /** 
    * select/unselect node 
    * 
    */ 
    selectNode(event: MouseEvent) { 
    if(event instanceof MouseEvent) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     } 
    this.resource.selected = true; 
    this.cssClasses = this.setCssClasses(); 
    this.selected.emit(this.resource); 
    } 
... 
.... 
.... 
} 

Answer 1

In Ihrem Fall jeder Knoten selbst an ihre Mutter sendet und somit App Komponente immer Wurzelknoten des Baumes erhalten. Die Lösung besteht darin, dass im Falle eines Klickereignisses dieser Knoten selbst an den Elternknoten gesendet wird, sonst geben Sie einfach weiter, was von eventemitter des Kindknotens erhalten wird.

selectNode(event: MouseEvent) { 
    console.log(event) 
    let selNode: any; 
    if(event instanceof MouseEvent) { 
         event.preventDefault(); 
         event.stopPropagation(); 
         selNode = this.resource 
    } else { 
     selNode = event 
    } 
    this.selected.emit(selNode); 
}