Typescript 如何启动angular2自定义事件

父模板：

<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>

树项目模板：

<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>

{{model.name}
添加子项

对于上面的示例，父级仅从根树项（直接子级）接收addChild事件。是否可以从任何树项中弹出addChild事件？

---

我使用的是angular 2.0.0-rc.0。

来自

EventEmitter

的事件不支持冒泡

您可以使用

element.dispatchEvent（）

触发冒泡的DOM事件，也可以使用消息总线之类的共享服务

---

另请参见

我来这里寻找解决方案，我自己找到了一个。在

树项上

，可以添加如下事件处理程序：

<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>

---

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

最接近冒泡的方式是IMO使用由父级创建并由组件访问的就地服务。参见任务控制示例

TL；博士：

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

---

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

可以使用JavaScript CustomEvent对象吗？这件事的支持者有什么骗局吗？角度文档中并没有涉及到这一点。可能是因为他们建议不要直接访问DOM，

element.dispatchEvent（）

就是这样做的。Angular建议使用共享服务而不是DOM事件。DOM事件会导致对整个应用程序运行更改检测，而具有可观察对象的服务只会导致对订阅可观察对象的组件运行更改检测。@GünterZöchbauer让我们假设我们有一个应用程序，其中右键单击特定类/选择器的锚应该显示一个自定义上下文菜单。在jQuery中，我们会有类似于

$（'body'）的内容。在（'contextmenu'，'a.context'，myFunction）

上，我宁愿将事件绑定到body而不是a标记。你是说这种方法在Angular2中是不可能的？如果你听一个冒泡的DOM事件，不管你在哪里听它，它在任何地方都有相同的效果。如果您使用在代码中触发的自定义事件，则具有可观察性的共享服务通常是更好的选择。只需使用普通的TS/JS。如果您想保持代码平台中立（web worker、universal，…您可以使用渲染器），这应该是正确的答案，因为它用解决方案回答了问题，而不是“EventEmitter”不支持冒泡。在谴责它之前，您可以阅读我答案的第一行以上内容。