Angular报错：Cannot read property 'setRoot' of undefined 技术求助

嘿，这个问题我做项目时也踩过一模一样的坑，其实核心问题出在setTimeout回调函数的this指向变化上，咱们来一步步理清楚：

问题根源：setTimeout回调的this默认指向全局对象 #

默认情况下，setTimeout的回调函数会运行在全局上下文里（浏览器环境是window，Node.js是global）。哪怕你在外部已经正确定义了nav，但如果回调里的nav依赖于原来的上下文（比如类实例里的this.nav），就会出现undefined的情况。

举个典型的错误代码例子：

class NavigationHandler {
  constructor() {
    this.nav = getNavInstance(); // 这里nav确实被正确初始化了
  }

  navigateToHome() {
    setTimeout(function() {
      this.nav.setRoot('/home'); // 这里的this已经不是NavigationHandler的实例了！
    }, 1000);
  }
}

当setTimeout的回调执行时，this指向的是全局对象，this.nav自然就是undefined，调用setRoot就会抛出你遇到的错误。而去掉setTimeout时，代码直接在navigateToHome的上下文里执行，this还是类实例，所以能正常访问nav。

几种可行的解决办法 #

1. 使用箭头函数（最推荐）
   箭头函数不会创建自己的this，它会继承外层函数的this指向，完美解决这个问题：

navigateToHome() {
  setTimeout(() => {
    this.nav.setRoot('/home'); // 这里的this和navigateToHome里的this一致
  }, 1000);
}

2. 提前保存上下文到变量
   在setTimeout外部把当前上下文存成一个变量（比如self、that），回调里用这个变量访问nav：

navigateToHome() {
  const self = this;
  setTimeout(function() {
    self.nav.setRoot('/home'); // 通过self访问原本的类实例
  }, 1000);
}

3. 用bind绑定this到回调函数
   通过bind方法把回调函数的this强制绑定到当前上下文：

navigateToHome() {
  setTimeout(function() {
    this.nav.setRoot('/home');
  }.bind(this), 1000); // 绑定this为当前类实例
}

如果你的nav是全局变量但还是出现这个问题，那得检查下setTimeout执行前有没有代码意外修改或销毁了nav，不过根据你描述的“去掉setTimeout就正常”，大概率还是this指向的锅~

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