Angular2 向 DOM 树发出事件

Question

我有 3 个组件来管理树:面板、树和节点。

面板包含一棵树

@Component({
  selector: 'panel',
  template: `
    <input type="button" (click)="createNode()" value="new node">
    <input type="button" (click)="createChild()" value="new child">
    <input type="button" (click)="deleteNode()" value="delete node">
    <tree [tree]="myTree"></tree>
    Selected node: {{selectedNode | json}}
  `,
  directives: [Tree]
})
export class Panel {
  public selectedNode;
  constructor() {}
}

树包含一个或多个节点(根节点)

@Component({
  selector: 'tree',
  template: `<node *ngFor="#n of tree" [node]="n"></node>`,
  directives: [Node]
})
export class Tree {
  @Input() tree;
  constructor() {}
}

一个节点又可以包含一个或多个节点(子节点)

@Component({
  selector: 'node',
  providers: [],
  template: `
    <p (click)="onSelect(node)">{{node.name}}</p>
    <div class="subTree">
      <node *ngFor="#n of node.children" [node]="n"></node>
    </div>
  `,
  directives: [Node]
})
export class Node {
  @Input() node;
  constructor() {}

  onSelect(node) {
    console.log("Selected node: " + node.name);
  }
}

面板是一个组件，允许通过向树添加和删除节点来编辑树。 我想做的是每次单击树中的节点时更新面板内的变量“selectedNode”。

点击事件的处理程序位于 Node 组件内部，这里我想通知 Panel 有一个 Node 被点击，然后更新上面的变量。

这是一个简化的 Plunkr到目前为止我所做的事情

我研究了几种可能的解决方案，但没有找到任何适合我需求的解决方案。我知道 @Output-EventEmitter 机制允许向父组件发送事件，但在我的例子中，节点的父节点是树(如果是根节点)或另一个节点(子节点)。

在 AngularJS 中，我使用 $emit 在单击节点时发送事件，并使用 $on 在面板中捕获该事件并更新 selectedNode 变量。 在 Angular2 中，$emit $broadcast $on 事件机制不再可用。 我怎样才能达到我的目标？任何建议，即使不是基于事件的建议，我们都会表示赞赏。

Answer 1

由 EventEmitter 触发的事件根本不会冒泡。解决方法是使用 EventBus 服务。

另请参阅Global Events in Angular 2和 Delegation: EventEmitter or Observable in Angular2