Angular 4 页面无活动时自动重定向实现问题求助

你的现有代码问题很明确——它只是在组件初始化时启动了一个固定20秒的定时器，不管用户有没有进行操作都会触发跳转，完全没有检测用户的交互行为。要实现“无活动才跳转”的需求，我们需要监听用户的活动事件，每次用户有操作就重置定时器。

下面是完整的实现方案：

首先，在组件中定义定时器变量和超时常量，同时确保注入了Router：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  private timeoutTimer: any;
  private readonly INACTIVITY_TIMEOUT = 20000; // 20秒

  constructor(private router: Router) {}

接下来，在ngOnInit中启动初始定时器，并监听用户的活动事件（这里以点击事件为例，你可以根据需要添加更多事件）：

ngOnInit() {
  this.startTimeout();
  // 监听页面点击事件，每次点击都重置超时定时器
  document.addEventListener('click', this.resetTimeout.bind(this));
  
  // 如果需要监听更多活动（比如键盘输入、鼠标移动），可以添加这些事件：
  // const activityEvents = ['click', 'mousemove', 'keydown', 'scroll'];
  // activityEvents.forEach(event => {
  //   document.addEventListener(event, this.resetTimeout.bind(this));
  // });
}

然后实现启动定时器和重置定时器的方法：

private startTimeout() {
  this.timeoutTimer = setTimeout(() => {
    // 无活动超时后重定向到首页
    this.router.navigate(['/']);
  }, this.INACTIVITY_TIMEOUT);
}

private resetTimeout() {
  // 清除当前定时器
  if (this.timeoutTimer) {
    clearTimeout(this.timeoutTimer);
  }
  // 重新启动定时器
  this.startTimeout();
}

最后，在组件销毁时记得清除定时器和移除事件监听，避免内存泄漏：

ngOnDestroy() {
  if (this.timeoutTimer) {
    clearTimeout(this.timeoutTimer);
  }
  document.removeEventListener('click', this.resetTimeout.bind(this));
  
  // 如果监听了多个事件，也要对应移除：
  // const activityEvents = ['click', 'mousemove', 'keydown', 'scroll'];
  // activityEvents.forEach(event => {
  //   document.removeEventListener(event, this.resetTimeout.bind(this));
  // });
}
}

这样修改后，只要用户在页面上有点击（或你指定的其他活动），定时器就会被重置，只有当连续20秒没有任何操作时，才会自动跳转到首页。

内容的提问来源于stack exchange，提问作者Mex