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”。

click事件的处理程序位于Node组件内部，在这里我想通知面板单击Node的节点，然后更新上述变量。

这是到目前为止我所做的简化的Plunkr

我研究了几种可能的解决方案，但没有找到任何适合我的需求。 我知道@ Output-EventEmitter机制允许将事件发送到父组件，但是在我的情况下，Node的父是Tree（如果是根节点）或另一个Node（子节点）。

在AngularJS中，当单击Node时，我使用$emit发送事件，并在Panel中使用$on捕获事件并更新selectedNode变量。 在Angular2中，不再提供$emit $broadcast $on事件机制。 我如何达到目标？ 任何建议，甚至不是基于事件的建议，都应受到赞赏。

Answer 1

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

另请参阅Angular 2中的全局事件和委托：Angular2中的EventEmitter或Observable

Answer 2

我在这里创建了一个常规的pub-sub示例，您也可以查看该示例。

这个想法是使用来自RxJs的主题。 主题可以同时用作“观察者”和“可观察者”。 这使我可以通过同一服务发出和订阅值。

import {Subject } from 'rxjs/Subject';
import {Customer} from './customer';
export class CustomerEventEmitter extends Subject<Customer>{
    constructor() {
        super();
    }
    emit(value) { super.next(value); }
}

//Consume
this.service.Stream.subscribe(...);

//Produce
this.service.Stream.emit(customer);

这是运行中的演示： http : //www.syntaxsuccess.com/angular-2-samples/#/demo/pub-sub

全文：

http://www.syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0