您如何设计和实现应用程序范围的事件检测机制来捕获大型 Angular 应用程序中的点击事件？

Question

我正在尝试实施一个解决方案来向 Google Analytics 报告详细的用户活动。由于该应用程序是单页应用程序，我知道我可以从 捕获页面更改事件router，但这只是解决方案的基本部分，仅用于报告所见页面。

重点是因为这是一个包含 500 多个页面/组件的大型应用程序，我不想创建记录器服务需要通过添加它来更改每个页面，我需要找出一种方法来确定集中式或应用程序范围捕捉和检测按钮点击事件的地方，也可能是触发它们的页面。然后我希望能够将相关页面上的详细用户活动报告给分析，例如从 Y 页面单击 X 按钮。

对于一个中心位置，我知道有interceptorsHTTP 事件和router页面更改。除此之外，我知道也许我可以使用带有钩子的更改检测，但我不确定我是否必须将钩子连接到应用程序生命周期级别。

如何在 Angular 中实现一种机制来捕获和检测具有相关页面的组件元素事件？我可以利用框架提供的任何最佳实践或抽象吗？

注意：我已经了解到它Google Tag Manager专门用于分析目的，但我的问题仍然是如何使用 Angular 实现它。

Answer 1

自定义事件 API 是一种选择，但您必须在所有点击中发送该事件。

所以使用 HostListner 我们可以实现这一点。

在主要组件中添加一个监听器，即在 app.componnet 中

 @HostListener('window:click', ['$event'])
    onClickEvent(event: MouseEvent) {
    var target = event.target || event.srcElement;
    var id = target['id']; //this will be the id of the target that you clicked
    this.clickedValue = id;

  }

并在添加每个项目的 id 时遵循命名模式。即添加组件名称作为id 的前缀。prod build 后，组件名称将缩小为一个字母的名称，它失去了原来的名称。

例如：如果你有组件 mychild.component

<div>
<h1 id="mychild-h1">Test</h1>
</div>

在这里，id 是myChild -h1，您可以从中选择组件名称。现在您有了单击的组件的 id 和名称，并创建了一个服务来记录该信息。

附上一个示例代码以供检查

检查这个