如何冒出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>

对于上面的示例,parent仅从根树项(直接子项)接收addChild事件.是否可以从任何树项目冒泡addChild事件？我正在使用角度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);
}

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