如何处理嵌套递归组件中的事件

问题描述

我正在尝试构建一个树组件，其中 od-tree-node 组件递归嵌套以构建子节点.我在处理事件时遇到问题.对于叶子节点上的点击事件，鼠标事件总是触发，就好像事件发生在最顶部的组件上一样.我不知道如何处理.

I'm trying to build a tree component where od-tree-node component is nested recursively to build child nodes. I'm having problem with handling events.For click events on the leaf node, the mouse event always triggers as if the event occurred on the the top most component. I'm not sure how to handle this.

预期行为:当用户点击叶子/父/根节点时，父组件(例如:app.component.ts)需要知道点击了哪个节点.

The expected behavior: When the user clicks on leaf/parent/root node the parent component (ex: app.component.ts) needs to know what node was clicked.

当前行为:无论点击哪个节点，都选择根节点(发射到父组件)

Current behavior: No matter which node is clicked, the root node is selected (emitted to parent component)

plunker:https://plnkr.co/edit/JZTlA5?p=预览

这是模板:

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);
  }
 ...
 ....
 ....
}

推荐答案

在您的情况下，每个节点都将自己发送到其父节点，因此应用程序组件始终获取树的根节点.解决方案是，在点击事件的情况下，将该节点本身发送到父节点，否则只需传递从子节点的 eventemitter 接收到的内容.

In your case every node is sending itself to its parent and thus app component always get root node of the tree. Solution is that in case of click event send that node itself to the parent node else just pass on what is received from eventemitter of child node.

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);
}

这篇关于如何处理嵌套递归组件中的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！