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

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

Answer 3

最接近 IMO 冒泡 Angular 方式的方法是使用由父级创建并由组件 as referenced in accepted answer 访问的就地服务。请参阅任务控制示例。

TL;博士：

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

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

如何冒出angular2自定义事件

3 个答案: