Angular 9 取消订阅 NavigationEnd

Question

我在路由器 NavigationEnd 上使用这样的订阅：

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.getData();
    }
  });

在同一路线中导航时，我需要这个来更新页面数据，例如/product1 和 /product2 使用相同的组件和路由，并在自定义路由服务中处理

这是为了在同一组件中更新路由时获取数据，并且按预期工作

问题是 this.getData() 在导航到另一个组件时也会运行s，这会在我导航到的组件中产生很多问题，我也运行不必要的从服务器获取

所以问题是： 我可以在离开组件时取消订阅路由器以便 this.getData() 不运行吗？

Answer 1

您可以在 Observables

中使用 Subscription

首先在你的组件上初始化

navigationSubs = new Subscription();


this.navigationSubs = this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.getData();
    }
  });

在销毁时或任何你想要的时候

this.navigationSubs.unsubscribe();

Angular 9 取消订阅 NavigationEnd

Angular 9 unsubscribe NavigationEnd

angular

typescript

angular9