Angular 9 'this' 在路由器 Navigationend 中未定义，在调试断点订阅

Question

我是 Angular 的新手，还在学习它。

我有一个订阅路由器 NavigationEnd 事件的组件，该事件访问一些在服务解析的路由中初始化的变量。

constructor(private route: ActivatedRoute, private router: Router) {

var that = this;
this.router.events.subscribe((event) => {
  
  if (event instanceof NavigationEnd) {

    this.nominatim = this.route.snapshot.data.meetings.nominatim;
    console.log(this.nominatim);

  }
});}

当我调试代码时，this.nominatim 变量是未定义的，但它确实包含一个我可以登录到控制台的值。

我在 stackoverflow 上发现了另一个问题，它解释了类似的情况 'This' is undefined inside subscribe

通过添加

var that = this;

在路由器事件订阅之前，我可以在调试中看到变量。

如果我仍然可以使用“this”上下文，我会更喜欢它。

我怎样才能让它工作？

Answer 1

首先你不应该在构造函数中订阅。 Angular 文档建议所有工作（除了非常轻量级的变量赋值）都在 ngOnInit 内完成 - 为了安全起见，除了依赖注入之外，您不应该使用构造函数。

如果您将代码移至 ngOnInit，您可能会发现“this”有效。 ngOnInit 是一个 Angular 生命周期钩子，在构造函数之后很快就会自动调用。

如果做不到这一点，你可以像这样在 ngOnInit 中调用一个方法：

ngOnInit() {
  this.myCodeToSubscribeToRouterEvents()
}

private myCodeToSubscribeToRouterEvents() {
  // TODO: Paste your subscription code here
}

然后在构造函数中可以这样写：

constructor(private route: ActivatedRoute, private router: Router) {
  this.myCodeToSubscribeToRouterEvents = this.myCodeToSubscribeToRouterEvents.bind(this);
}

是的，我知道当我刚刚说不要时我正在将代码放入构造函数中，但这是罕见的例外之一。此构造函数代码确保在 myCodeToSubscribeToRouterEvents 中“this”始终是组件的实例（这是您想要的），而不是其他东西。

希望对您有所帮助。 J.E.S.U.S 爱你 :D

关于：

this.nominatim = this.route.snapshot.data.meetings.nominatim;
console.log(this.nominatim);

你会更好：

this.nominatim = this.route.snapshot.data.meetings.nominatim;
console.log(this.route.snapshot.data);

因此您可以检查数据是否通过 :)