如何使用 Ionic 3 记录并保存应用程序中的每个点击操作？答案

【问题标题】：How can I log and save every click action in the app with Ionic 3?如何使用 Ionic 3 记录并保存应用程序中的每个点击操作？
【发布时间】：2020-01-02 23:58:00
【问题描述】：

我有一个 Ionic 3 应用程序，我需要记录用户在应用程序中执行的所有操作，例如用户单击的按钮或用户输入的页面等。之后，我会将这些日志发送到数据库。我试图用 HostListeners 做到这一点，但它让事情变得混乱。因为即使我点击一个空白空间，它仍然会继续记录。实际上，我不想将每个函数都写到应用程序中，因为我已经有 300 多个函数。所以，我很好奇这种情况是否有任何最佳实践。感谢您的帮助！

【问题讨论】：

是否要将用户操作保存到数据库中？
是的，这就是我真正想做的。我将为此设置一个端点。我只需要保存用户在应用程序工作时执行的每个操作。当用户终止应用程序时，我将通过该端点将所有这些日志发送到数据库。我只需要知道是否有任何最佳实践来获取每项操作。

标签： javascript ionic-framework ionic3 ionic4

【解决方案1】：

如果您想在数据库中保存用户操作，那么您需要手动查看每个操作。在这种情况下，请使用以下内容。您需要跟踪用户经历的每个事件，包括：单击、鼠标悬停、页面更改等。

https://ionicframework.com/docs/v3/api/util/Events/
https://ionicframework.com/docs/angular/lifecycle

或者，如果您想添加第三方分析，那么您可以使用以下方法：

https://ionicframework.com/docs/native/google-analytics

【讨论】：

我从您的回答中了解到，我需要在我的主 app.ts 中订阅点击事件，并且当我捕获点击事件时，我需要保存它们。我说的对吗？
是的，您需要处理每个事件（例如：单击、鼠标悬停、页面更改）将所有事件保存到数据库中。

【解决方案2】：

Ionic 3 的简单日志文件追加器。

ionic Log File Appender

【讨论】：

感谢您的评论！我在编辑的文本中更详细地解释了我的情况。我认为这个库不是我一直在寻找的。span>
HostListener 装饰器可以在 Angular 指令中使用，以监听由该指令附加到的宿主元素触发的事件。例如，可以监听表单的提交事件： @Directive({ selector: '[appInterceptSubmit]' }) export class InterceptSubmitDirective { @HostListener('submit', ['$event']) onSubmit(event: Event ) { console.log('表单提交！'); event.preventDefault(); } }
这是有道理的，但它也会导致在每个 .ts 文件中写入一些额外的代码，不是吗？这实际上是我不想做的。我正在寻找一种可以在一个 .ts 文件中管理所有这些事情的方法。

【解决方案3】：

用于保存用户日志的用户基于火的分析是链接如何保存链接

https://ionicframework.com/docs/native/firebase-analytics

【讨论】：