如何冒泡 angular2 自定义事件

Question

父模板：

<ul>
   <tree-item [model]="tree" (addChild)="addChild($event)"></tree-item>
</ul>

树项模板：

<li>
  <div>{{model.name}}
    <span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Child</span>
  </div>
  <ul *ngFor="let m of model.children">
    <tree-item [model]="m"></tree-item>
  </ul>
</li>

对于上面的示例，父项仅从根树项（直接子项）接收 addChild 事件。 是否可以从任何树项中冒泡 addChild 事件？ 我正在使用 angular 2.0.0-rc.0。

Answer 1

来自EventEmitter事件不支持冒泡。

您可以使用element.dispatchEvent()来触发冒泡的 DOM 事件，也可以使用消息总线等共享服务。

另见https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

我来到这里寻找解决方案，我自己想出了一个解决方案。 在您的tree-item ，您可以添加一个事件处理程序，如下所示：

<li>
  <div>{{model.name}}
    <span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Child</span>
  </div>
  <ul *ngFor="let m of model.children">
    <tree-item [model]="m" (yourEventEmitter)="handleEventBubble($event)"></tree-item>
  </ul>
</li>

并在您的 component.ts 中：

handleEventBubble(event): void {
  this.yourEventEmitter.emit(event);
}

这将导致事件在父元素上发出，父元素一直向上传递到根元素。 您甚至可以通过在重新发出事件之前转换事件来定义自定义冒泡逻辑。

Answer 3

与冒泡 Angular 方式 IMO 最接近的事情是使用由父级创建并由组件访问的就地服务， 如已接受的答案中所引用。 请参阅任务控制示例。

特尔；博士：

• 创建提供事件可观察源的服务
• 在父级注入并提供服务
• 在父组件的子组件中注入服务 - 它们将访问相同的实例
• 订阅父级中的事件，在子级中发出它们

组件不需要像示例中那样是父级的直接子级 - 服务在层次结构中被深入访问。