在路由器订阅中调用subscribe方法时，是否应取消对ActivatedRoute的订阅？

Question

我读到过，通常您不必明确地取消对路由器或activatedroute的订阅，因为：

ActivatedRoute及其可观察到的内容与路由器本身绝缘。当不再需要路由组件时,路由器会销毁该组件,并且注入的ActivatedRoute也会随之死亡。

this.routerSubscription = this.router.events
  .pipe(
    tap((event) => { 
      switch (true) {
        case event instanceof NavigationStart: { 
          setTimeout(() => this.showChildComponentLoading = true);
          break;
        }

        case event instanceof NavigationEnd:{
          this.activatedRoute.firstChild.paramMap.subscribe(paramMap => {
          if(paramMap.has('mode')){
              let newWebAppMode:string = paramMap.get('mode');
              if(this.dataStoreService.isValidWebAppMode(newWebAppMode) && newWebAppMode !== this.dataStoreService.currentAppMode)
                  this.saveToLocalStorage.next([DataType.WEB_APP_MODE, newWebAppMode]); 
          }
        });
//other code

每当有人导航到另一个组件/页面时，activatedroute.firstchild.parammap就会被再次订阅。只有当事件是navigationend的实例时，我才必须在路由器订阅中执行此操作，因为在此之前，url参数还不可用。

我的问题是，那些订阅会发生什么？他们是自动退订还是我需要手动退订每一个新的？如果是后者，我怎样才能有效地做到呢？

你们中的一些人可能会建议我使用activatedroute.firstchild.snapshot.parammap.myParameter，因为这样我就不用订阅任何东西了。但是，snapshot在重用同一组件时url参数发生更改时不起作用。所以我不能用那个。

Answer 1

是的，这看起来确实像是一个潜在的内存泄漏：在每个NavigationEnd上都会产生一个新的订阅，这样您就有可能无限数量的相同的同一流的观察者（并且ActivatedRoute.FirstChild.ParamMap会无限地发出）。您可以通过在订阅中放置一个简单的console.log(new Date())来验证。

我相信switchmap是您在这里的朋友（它在订阅新流时自动退订旧流）。喜欢某事

this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    switchMap(() => this.activatedRoute.firstChild.paramMap),
    filter(paramMap => paramMap.has('mode')),
    map(paramMap => paramMap.get('mode')),
    filter(newMode => this.dataStoreService.isValidWebAppMode(newMode) && 
        newMode !== this.dataStoreService.currentAppMode),
).subscribe(newMode => this.saveToLocalStorage.next([DataType.WEB_APP_MODE, newMode]);

顺便说一句，难道您不需要防止this.activatedroute.firstchild为空吗？