从指令向父元素发出事件答案

【问题标题】：Emit event from Directive to parent element从指令向父元素发出事件
【发布时间】：2016-10-24 01:56:23
【问题描述】：

我在 Angular 2 应用程序的 HTML 模板中有一个元素。我向它添加了一个指令：

<div myCustomDirective>HELLO</div>

我希望每当我将鼠标悬停在 div 上时，应该更改 div 内的文本，但需要从 Directive (mouseover) 事件中完成。

如何从Directive 发出事件并将其捕获到父元素中？

【问题讨论】：

为什么不在组件本身中监听鼠标悬停？什么是父元素？是不是模板中包含上述HTML的元素？
是的，那个
是父容器。另外我只是想了解是否有任何方法可以从 Directive -> Parent 传播数据。

标签： angular angular-directive

【解决方案1】：

如果myCustomDirective 有一个输出@Output() someEvent:EventEmitter = new EventEmitter(); 那么你可以使用

<div myCustomDirective (someEvent)="callSomethingOnParent($event)">HELLO</div>

【讨论】：

如何在标签中使用它？
你不能。要与路由器添加的组件通信，请使用共享服务（最好使用 observable 推送新事件）。

【解决方案2】：

我想在@GünterZöchbauer 的回答中补充一点，如果您尝试从 structural 指令发出事件并在应用指令时使用星号 (*) 语法，它不会工作。如果与* 语法一起使用，Angular 5.2.6 仍然不支持结构指令的@Output 绑定（请参阅GitHub issue）。

您必须将其转换为去糖形式（see here），即：

<ng-template [customDirective]="foo" (customDirectiveEvent)="handler($event)">
  <div class="name">{{hero.name}}</div>
</ng-template>

代替：

<div *customDirective="foo" (customDirectiveEvent)="handler($event)" class="name">{{hero.name}}</div>

【讨论】：

这只是救了我-很好的答案！也没有警告/错误
还要感谢我 - 可能让我从一个非常低效的下午中解脱出来：D
只是提到结构指令中的事件发射器在 Angular 7 中仍然不起作用。
结构指令中的事件发射器仍然无法在 Angular 10 中工作...
Angular 12 相同。