如何处理嵌套递归组件中的事件 [英] how to handle events in nested recursive component

问题描述

我正在尝试构建一个树组件，其中将 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 = preview

这是模板:

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

推荐答案

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

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

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