Angular 5中点击函数无法调用导入的会话检查方法求助

兄弟，我之前在Angular项目里也踩过类似的坑！页面加载时正常、点击按钮就报undefined，大概率是this指向异常或者方法绑定不到位导致的，咱们一步步来解决：

1. 先排查方法的绑定问题 #

页面加载时你应该是在ngOnInit()这类生命周期钩子中调用的通用方法，这时候this指向的是组件实例，所以能正常执行；但点击按钮触发方法时，如果没有正确绑定this，this可能会变成触发事件的DOM元素（或者严格模式下直接是undefined），导致调用通用方法时出错。

解决办法二选一：

• 在构造函数中绑定this：

  constructor() {
    // 把logout方法的this绑定到组件实例
    this.logout = this.logout.bind(this);
  }
  
  logout() {
    // 调用你的通用会话检查方法
    checkSessionAndRedirect();
  }
  

• 用箭头函数定义方法（箭头函数会自动捕获当前上下文的this）：

  logout = () => {
    checkSessionAndRedirect();
  }
  

2. 确认通用方法的导出导入是否正确 #

先检查你的通用TS文件，确保方法是用export导出的：

// common.session.ts 通用文件示例
export function checkSessionAndRedirect() {
  // 会话检查逻辑：比如判断token是否存在
  if (!sessionStorage.getItem('userToken')) {
    // 重定向到登录页
    window.location.href = '/login';
  }
}

然后组件里的导入路径要准确：

import { checkSessionAndRedirect } from '../utils/common.session'; // 替换成你的实际路径

3. 如果通用方法依赖Angular服务（比如Router） #

如果你的重定向是用Angular的Router服务而不是原生window.location，那普通函数没法直接使用注入的服务，这时候建议把通用逻辑封装成Angular服务：

// session.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class SessionService {
  constructor(private router: Router) {}

  checkSessionAndRedirect() {
    if (!sessionStorage.getItem('userToken')) {
      this.router.navigate(['/login']);
    }
  }
}

然后在组件中注入这个服务并调用：

import { SessionService } from '../services/session.service';

constructor(private sessionService: SessionService) {}

logout() {
  // 先执行注销逻辑：比如清除token
  sessionStorage.removeItem('userToken');
  // 调用服务中的检查方法
  this.sessionService.checkSessionAndRedirect();
}

按照上面的步骤排查，应该就能解决点击按钮时的undefined问题啦！

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