Angular2将事件发送到DOM树-Java 学习之路

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

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

click事件的处理程序在Node组件内部，这里我想告诉Panel单击一个Node然后更新上面的变量 .

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

我调查了几种可能的解决方案而没有找到符合我需求的任何东西我知道@ Output-EventEmitter机制允许向父组件发送事件，但在我的情况下，Node的父节点是树（在根节点的情况下）或另一个节点（子节点） .

在AngularJS中，我使用 $emit 在单击节点时发送事件，并使用 $on 在Panel中捕获它并更新selectedNode变量 . 在Angular2中， $emit $broadcast $on 事件机制不再可用 . 我怎样才能实现目标？任何建议，甚至不是基于事件的，都表示赞赏 .

2 回答

3

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

另见Global Events in Angular 2和Delegation: EventEmitter or Observable in Angular2

回复于 2024-05-02T13:44:55+08:00
1
我在这里创建了一个通用的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
回复于 2024-05-02T13:44:55+08:00

Angular2将事件发送到DOM树

2 回答

相关问题