我有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中，我曾经$emit在单击Node时发送事件，并$on在Panel中捕获它并更新selectedNode变量。在Angular2中，$emit $broadcast $on事件机制不再可用。我如何达到目标？任何建议，甚至不是基于事件的建议，都应受到赞赏。
触发的事件EventEmitter根本不会冒泡。解决方法是改用EventBus服务。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句