如何取消订阅路由解析类中的可观察对象

Posted 2023-02-22

【中文标题】如何取消订阅路由解析类中的可观察对象

【英文标题】：How to unsubscribe from an observable inside a route resolve class

【发布时间】：2017-05-15 14:08:20

【问题描述】：

在 ngOnDestroy 方法中，我取消订阅了一个我订阅过的 observable，否则代码会被多次执行...

ngOnInit()

    this.sub = this.route.params.subscribe(params => 
    
        this.projectId = +params['id'];
        this.projectStore.project = this.projectId;

        // load data when the route changes
        this._tasksService.gettasks(this.projectId).subscribe(years =>  this.tasks = years.map(y => new task(y)) ); // no need to clean up the subscription

    );
    // load data when the component is initialized
    this._tasksService.gettasks(this.projectId).subscribe(years =>  this.tasks = years.map(y => new task(y)) ); // no need to clean up the subscription



ngOnDestroy()

    this.sub.unsubscribe();

现在我想把它放在一个路由器解析类中，但是没有 ngOnDestroy - 当然 - 只有一个 NavigationEnd 事件，我可以再次订阅它。

这意味着我订阅了 NavigationStart 事件（当我离开路线时发生）以取消订阅另一个订阅，即路由参数更改订阅哈哈...

我想这不是要走的路，但 Google 什么也没提供。

有人知道如何处理这种情况吗？还是应该路由参数更改订阅真的只属于一个组件？

  constructor(private service: TasksService, private router: Router)
  

   this.navigationEnded = this.router.events
      .filter(event => event instanceof NavigationStart)
      .map(() => this.router.routerState.root)
      .subscribe((event) =>
      
         this.navigationEnded.unsubscribe();
      );
  

更新

当我将此代码放入 resolve 方法时：

  this.route.params.subscribe(params => 
    
         // reload data by the new id parameter does not work with params
         // I have to use inside here: route.params['id']
    );

params 数组中没有 id，它的长度只是 0。

相反，我必须在 params 订阅中使用 route.params['id']，但为什么呢？

【问题讨论】：

我并不完全清楚问题是什么或您实际尝试完成什么。为什么你认为你需要退订？注入服务的路由器是根路由器，该路由器将在整个应用程序生命周期内保持不变。

我尝试完成：我想将 ngOnInit/ngOnDestroy 中的工作代码放入路由器解析类中，如果没有路由器解析类，行为应该是相同的。

我想使用解析功能，因为加载数据然后激活路由视图具有更好的最终用户体验。

【参考方案1】：

您可以只使用first() 运算符。这样，observable 在第一个事件之后完成。无需通过这种方式取消订阅：

this.router.events
  .filter(event => event instanceof NavigationStart)
  .map(() => this.router.routerState.root)
  .first()
  .subscribe((event) =>
  
     //this.navigationEnded.unsubscribe();
  );

【讨论】：

我意识到注入 Resolve 类型的类的 Route/Router 会导致未定义的 route/router 实例。此外，当我将此代码放入 resolve 方法时： this.route.params.subscribe(params => // params instance has no paramters like id );

Router 肯定可以工作。路由传递给resolve(...)方法angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

抱歉，即使注入了路由，路由器也能正常工作。不知道为什么它现在有效。请在我的初始化问题中查看我的更新:-)

这是我在我的问题中写的。我只是想知道为什么我作为开发人员可以进入技术死胡同，我使用代码但没有预期的解决方案，我说的是空参数。

我得到“.first() 不是函数”:(