Angular2 - 如何在 (click) 或 (routerLink) 之前触发事件

Question

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

<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) 等事件之前调用某些方法。

这是可能的吗？

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

- szmitas

---

你在点击之前尝试调用什么？为什么不能在点击事件中处理它？ - LLai

我相信我正确地理解了你的问题。为什么不这样做：public onClick() { methodToExecuteBefore(); console.log('click'); }？ - mickdev

因为 onClickListener 最终将在根（主）组件中，并且必须处理所有点击（不仅仅是 click）。 - szmitas

你想处理应用程序中的任何位置的点击，还是只处理按钮上的点击？ - ConnorsFan

任何地方。每次点击都很重要。 - szmitas

Answer 1

如果您想在Angular处理点击事件之前在应用程序的任何地方处理它们，可以将点击事件侦听器添加到窗口，并指定该事件将在捕获阶段中处理。在下面的代码片段中，使用useCapture设置为true调用addEventListener("click", fn, useCapture)（请参见MDN文档）。

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

你可以在 this plunker 中看到它的工作情况。

- ConnorsFan

---

非常好的实现 - LLai

这就是我一直在寻找的。 - szmitas