Angular2 - 如何在（点击）或（routerLink）之前触发事件答案

【问题标题】：Angular2 - how to trigger event before (click) or (routerLink)Angular2 - 如何在（点击）或（routerLink）之前触发事件
【发布时间】：2018-06-03 09:14:20
【问题描述】：

我用模板创建了一个简单的组件：

<div (click)="onClick();">Click me</div>

在 *.ts 文件中我有类似的东西：

public onClick() {
    console.log('click');
}

@HostListener('document:click', ['$event'])
public onClickListener(event: Event) {
    console.log('click listener');
}

在这种情况下，onClick 函数总是在 onClickListener 之前调用。

我的目标是在 Angular (click) 或 (routerLink) 等之前调用一些方法。

有可能吗？

重要的是 - 这个监听器应该是一个全局方法，它在运行时处理所有点击。

【问题讨论】：

点击前你想调用什么。为什么点击事件不能处理？
我确信我正确理解了您的问题。为什么不这样做： public onClick() { methodToExecuteBefore(); console.log('点击'); } ?
因为 onClickListener 最终将在根（主）组件中，并且必须处理所有点击（不仅仅是（点击））。
你想在应用程序的任何地方处理点击，还是只在按钮上？
任何地方。每次点击都很重要。

标签： javascript angular events onclick onclicklistener

【解决方案1】：

如果您想在应用程序中的任何位置处理点击事件，然后再由 Angular 处理，您可以在窗口中添加一个点击事件监听器，并指定该事件将在 capture phase 中处理。在下面的代码 sn-p 中，调用 addEventListener("click", fn, useCapture) 并将 useCapture 设置为 true（参见 MDN documentation）。

window.addEventListener("click", () => {
  console.log("Global click handler");
}, true);

你可以在this plunker看到它。

【讨论】：

非常好的实现
这就是我想要的。