来自组件的角度点击事件未查看答案

【问题标题】：Angular click events from component not view来自组件的角度点击事件未查看
【发布时间】：2017-10-15 23:24:50
【问题描述】：

为了解释我在寻找什么，它最好地说明了 jQuery 的工作方式，您可以指定一个通用的 HTML 元素来监视事件：

$("label").on("click", function(event){ 
    // do stuff to this element
});

或者传统的addEventListener

document.getElementsByTagName('label').addEventListener('click', function(event){
    // do stuff to this element
});

我很惊讶在整个互联网上都没有看到这个解决方案，相反我看到了很多关于如何使用事件绑定的例子(click)="clickHandler" 显然你不想把那个处理程序放在你的视图中。

我能否获得一些关于如何在 Angular 中观看通用事件的指导/链接？

更新：我很欣赏 @HostListener 监听整个 DOM 和 Renderer2 之间的辩论，这将适用于特定的一般元素，显然也适用于 Observable 选项。

【问题讨论】：

您是否希望动态附加事件？还是您只是更喜欢在 JS 端附加事件？就个人而言，我认为 Angular 模板语法中的事件绑定表示法：(event) 比在 JS 端完成所有工作更清晰、更干净。无论如何，你可以在这里找到你要找的东西：stackoverflow.com/questions/35080387/…
如果你在不同的地方使用相同的处理程序，你可以尝试制作一个组件
嘿@AhmedMusallam 在我看来，应用事件绑定 20 多次似乎是错误的。但是Renderer 看起来像是答案，谢谢！
Dynamically add event listener in Angular 2的可能重复
这让我想知道您的组件的视图有多大，是否应该分解它。无论如何，如果是这样，我将问题标记为与我发布的问题重复。

标签： angular data-binding onclick dom-events

【解决方案1】：

对于声明式解决方案，如果您想要整个文档的单击处理程序，请将其放在任何组件中：

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
  console.log(event);
}

【讨论】：

不错，很有趣
我已经看到了这个但是喜欢添加许多事件绑定的问题，导入和使用 @HostListener 显然会监听整个 DOM 或 Renderer2 会监听一个具体元素？
HostListener 仅附加一个事件侦听器（对于您在其中定义的组件的每个实例）。如果您想要整个应用程序的单个事件侦听器，则将其放入仅存在一次的组件中，例如 AppComponent。我认为我的答案等同于 joh04667 的答案，只是它是一种更具声明性的风格。

【解决方案2】：

@Output 格式 ((click)="") 是 Angular 对 DOM 事件的包装器（例如，该示例用于 onclick）。这很重要，因为 Angular 管理子组件和父组件之间的更改检测，并使用这些 @Inputs 和 @Outputs 来执行此操作。

Angular 对 DOM api 本身做了很多工作，我们不应该过多地混淆它。很多时候，您可以使用指令或扩展组件来处理行为。

但是，如果您想在运行时全局放置一些东西，您可以将 Renderer 注入到您的组件中：

constructor(public el: ElementRef, public renderer: Renderer) { 
   renderer.listenGlobal('document', 'click', (event) => {
     // Do something with 'event'
   });
}

注意：Renderer 被标记为已弃用，并将被替换为 Renderer2，API 略有不同。

【讨论】：

你确定 Angular 使用虚拟 DOM 吗？你能提供一个链接来支持这个吗？
经过更多研究，我可能弄错了。我很困惑它使用 Shadow DOM 进行样式设置。我编辑了我的回复，谢谢

【解决方案3】：

您可以使用 Rxjs 可观察对象并订阅 dom 事件：

var button = document.querySelector('button')

Rx.Observable.fromEvent(button, 'click')
  .subscribe(
    (event) => console.log(event)
   )

【讨论】：

建议添加事件甚至执行document.querySelector 可能不是一个好主意，除非有特定情况并且该代码在AftreViewInit 组件生命周期中。
这和referrer 是一样的，但多了observables 的好处
我已经厌倦了 Rxjs。这就像使用正则表达式。你用它来解决一个问题，然后你就有两个问题。
@ThinkingMedia 哈哈，起初似乎是这样，并且有大量的学习“悬崖”，但恕我直言，这是值得的。