从 html 事件调用 Angular 2 组件方法答案

【问题标题】：call Angular 2 component method from html event从 html 事件调用 Angular 2 组件方法
【发布时间】：2016-08-02 09:55:53
【问题描述】：

是否可以从 html 事件中调用 Angular 组件方法？

<shape onclick="myMethodInParentComponent()" >

我不能使用(click)，因为角度不知道shape。 Shape 也有许多未知的子元素，因此将整个 DOM-Tree 重建为 Comoponents 对我来说工作量太大。

【问题讨论】：

与其提出新问题，不如改进stackoverflow.com/questions/38716878/…，这似乎很相似。
这是另一个问题。在这里，我问如何使用常规的 onlick 事件处理 angular2 方法，而在另一个问题中，情况正好相反。
(click) 是一个常规的点击事件。 onclick 是纯 JS，与 Angular2 无关。
这是我的问题。 X3dom 确实会触发 onclick 事件而不是 Angular 的 (click)
没有onclick 事件。鼠标点击触发click 事件，onclick 是在触发click 处理程序时调用的事件处理程序。在 Angular2 中，您可以使用 (click)="handler($event)" 而不是 onclick="handler" 为 click 事件注册自己的事件处理程序

【解决方案1】：

hack，但我要求的是 hack：

onclick="ng.probe(myparendcomponentid).componentInstance.mymethod()

【讨论】：

你确定这在切换到 prodMode 后仍然有效吗？
不，这仅用于调试目的，因此仅在 devMode 下。如果您可以提供有关您尝试完成什么的更多信息，那么提供适当的解决方案会更容易。那是我第一次听说有人对点击事件有问题。这是最基本的东西。唯一可能导致问题的是使用element.append() 或[innerHTML]="someHtml" 动态添加元素时。除此之外，它只是工作。如果它不适合你，那么你正在做一些奇怪的事情。您可以创建一个 plunker 并将其发布到另一个问题吗？
难以置信。如果它真的有效，那就是一个丑陋的黑客，因为ng... 不应该被使用，除非用于调试目的。我假设您将 prodMode 设置为没有任何效果的后期。
我设置在bootstrap之前。此外，如何启用 prodmode 的角度消息也不会打印到控制台。我知道这是一个丑陋的黑客。
那么看来我错了ng... 不能在 prodMode 下工作。

【解决方案2】：

添加自定义指令并实现 HostListener。Listen click event using directive

使用事件发射器调用父组件中的函数

【讨论】：