Ionic 4中router未定义及goActive不是函数的技术问题求助

让我们一步步拆解你遇到的两个问题，然后给出可行的解决方案：

问题1：类外部方法时router未定义 #

当你把函数放到类外部时，goInactive里的var router: Router只是一个空的类型声明，并没有关联到你在类构造函数中注入的Router实例。类外部的函数无法直接访问类内部的成员（包括注入的依赖），所以调用router.navigate自然会报错。这种方式本身就不适合Angular的组件架构，因为组件的逻辑应该封装在类内部，便于依赖注入和生命周期管理。

问题2：类内部方法时goActive不是函数 #

这个问题主要有三个原因：

• 方法调用缺少括号：你写的this.goActive和this.startTimer只是引用了函数本身，并没有执行它们，应该改为this.goActive()和this.startTimer()。
• 事件监听中的this指向错误：当你用addEventListener绑定this.resetTimer时，事件触发时的this会指向触发事件的DOM元素（比如window或者某个元素），而不是你的HomeScreenPage实例，所以此时调用this.goActive()会找不到这个方法。
• 未声明类属性timeoutID：你使用的timeoutID是全局变量，应该作为类的私有属性来管理，避免全局污染。

正确的实现代码 #

下面是修复后的完整代码，解决了上述所有问题：

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

export class HomeScreenPage implements OnInit, OnDestroy {
  // 声明timeoutID作为类的私有属性
  private timeoutID?: number;

  constructor(public router: Router) {
    // 组件初始化时设置无活动检测
    this.setupInactivityChecker();
  }

  ngOnInit(): void {
    // 如果有其他初始化逻辑可以放在这里
  }

  startTimer(): void {
    // 用箭头函数确保goInactive中的this指向类实例
    this.timeoutID = window.setTimeout(() => this.goInactive(), 2000);
  }

  resetTimer(): void {
    window.clearTimeout(this.timeoutID);
    this.goActive();
  }

  goInactive(): void {
    console.log('Ahhhh.. finally inactive again. Now I may rest -_-');
    this.router.navigate(['login']);
  }

  goActive(): void {
    console.log('Active again');
    this.startTimer();
  }

  setupInactivityChecker(): void {
    // 用箭头函数绑定this，确保事件触发时this指向类实例
    window.addEventListener("mousemove", () => this.resetTimer(), true);
    window.addEventListener("mousedown", () => this.resetTimer(), true);
    window.addEventListener("keypress", () => this.resetTimer(), true);
    window.addEventListener("DOMMouseScroll", () => this.resetTimer(), true);
    window.addEventListener("mousewheel", () => this.resetTimer(), true);
    window.addEventListener("touchmove", () => this.resetTimer(), true);
    window.addEventListener("MSPointerMove", () => this.resetTimer(), true);

    // 启动初始计时器
    this.startTimer();
  }

  // 组件销毁时移除事件监听，避免内存泄漏
  ngOnDestroy(): void {
    window.removeEventListener("mousemove", () => this.resetTimer(), true);
    window.removeEventListener("mousedown", () => this.resetTimer(), true);
    window.removeEventListener("keypress", () => this.resetTimer(), true);
    window.removeEventListener("DOMMouseScroll", () => this.resetTimer(), true);
    window.removeEventListener("mousewheel", () => this.resetTimer(), true);
    window.removeEventListener("touchmove", () => this.resetTimer(), true);
    window.removeEventListener("MSPointerMove", () => this.resetTimer(), true);
    window.clearTimeout(this.timeoutID);
  }
}

关键修复点说明 #

1. 绑定this的正确方式：使用箭头函数() => this.resetTimer()作为事件监听的回调，这样可以确保回调中的this始终指向HomeScreenPage的实例，而不是DOM元素。另外在setTimeout中也用了箭头函数来保证goInactive中的this正确。
2. 添加方法调用括号：把所有this.goActive改为this.goActive()，this.startTimer改为this.startTimer()，确保函数被执行。
3. 声明类属性timeoutID：将timeoutID作为类的私有属性，避免全局变量的问题。
4. 添加ngOnDestroy生命周期钩子：在组件销毁时移除所有事件监听并清除计时器，防止内存泄漏，这是Angular组件开发的最佳实践。

这样修改后，你的无活动检测功能应该可以正常运行，不会再出现router未定义或者goActive不是函数的错误了。

内容的提问来源于stack exchange，提问作者Jeandre Pretørius