Angular2 - 如何在（单击）或（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）之前调用一些方法。

这是可能的？

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

Answer 1

如果要在Angular处理之前在应用程序中的任何位置处理单击事件，可以向窗口添加单击事件侦听器，并指定将在capture phase中处理事件。在下面的代码片段中，addEventListener("click", fn, useCapture)被调用，useCapture设置为true（参见MDN documentation）。

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

你可以在this plunker看到它。