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');
}

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

我的目标是在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中看到它。

Angular2 - 如何在（单击）或（routerLink）

1 个答案: