Angular升级至11后Observable的filter方法不存在报错的修复咨询

该报错是RxJS 6+ 版本的破坏性变更导致，和Angular 10升级到11的版本迭代无直接关联：RxJS 6开始彻底移除了直接挂载在Observable实例上的原型操作符，原先可以直接链式调用的.filter()、.map()等方法全部失效，所有这类操作符需要单独导入，通过Observable实例的.pipe()方法组合使用。你集成的模板使用的是RxJS 5时代的过时写法，所以在当前Angular配套的RxJS版本下无法运行。

• 补充导入缺失的filter操作符：从rxjs/operators路径引入filter，不要从rxjs根路径导入，否则会触发版本兼容警告。
• 改写原有的Observable调用链路：把直接挂载在this.router.events上的filter方法，挪到pipe()参数中。
  修正前的错误写法：this.router.events.filter((event:any) => event instanceof NavigationEnd).subscribe(...)
  修正后的正确写法：

  this.router.events.pipe(
    filter((event): event is NavigationEnd => event instanceof NavigationEnd)
  ).subscribe(...)
  

  这里使用类型谓词作为filter的返回值，可以让TypeScript自动推导后续回调里的事件类型，省去冗余的类型标注。

除了filter的写法错误，你的代码还存在几处会导致运行时崩溃的逻辑问题：

• 变量赋值错位：原先代码把路由订阅返回的Subscription实例赋值给了名为navbar的变量，但后续代码直接对这个实例调用classList.add()/classList.remove()——这类DOM属性属于页面元素，Subscription实例本身根本没有对应的属性，运行时会直接报undefined错误。
• 事件监听器重复绑定：原先把window滚动事件的绑定逻辑写在NavigationEnd的订阅回调里，意味着每次路由跳转完成都会新增一个滚动事件监听，多次跳转后会累积大量重复监听器，造成内存泄漏和逻辑重复执行。
• 空值防护不足：直接调用this.navbar.sidebarClose()，如果当前路由下导航栏组件未渲染（比如登录页），就会触发undefined的方法调用报错。
• 取值存在边界风险：对路由路径执行split('/')[2]的取值操作时，如果当前路由层级不足3段，会直接取到undefined，引发后续判断逻辑异常。
• 资源未清理：路由订阅和滚动事件绑定后，没有在组件销毁时执行解绑，会导致组件销毁后仍有逻辑在后台运行。

import { DOCUMENT, Location } from '@angular/common';
import { Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { NavbarComponent } from './commun/navbar/navbar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  private routerSubscription?: Subscription;
  private unlistenScroll?: () => void;
  @ViewChild(NavbarComponent) navbar?: NavbarComponent;

  constructor(
    private renderer: Renderer2,
    private router: Router,
    @Inject(DOCUMENT) private document: Document,
    private element: ElementRef,
    public location: Location
  ) {}

  ngOnInit() {
    // 监听路由导航完成事件
    this.routerSubscription = this.router.events
      .pipe(
        filter((event): event is NavigationEnd => event instanceof NavigationEnd)
      )
      .subscribe(() => {
        // 滚动回顶部逻辑
        if (window.outerWidth > 991) {
          window.document.children[0].scrollTop = 0;
        } else {
          window.document.activeElement?.scrollTop = 0;
        }
        // 可选链判断避免组件未渲染时报错
        this.navbar?.sidebarClose();
      });

    // 滚动事件只绑定一次，避免重复监听
    this.unlistenScroll = this.renderer.listen('window', 'scroll', () => {
      const scrollOffset = window.scrollY || window.pageYOffset;
      const currentPath = this.location.path();
      // 路径取值加兜底，避免层级不足时报错
      const pathSegment = currentPath.split('/')[2] ?? '';
      // 从DOM中查询实际的导航栏元素
      const navbarDom = this.element.nativeElement.querySelector('nav.navbar');
      if (!navbarDom) return;

      if (scrollOffset > 150) {
        navbarDom.classList.remove('navbar-transparent');
      } else if (pathSegment !== 'login' && currentPath !== '/nucleoicons') {
        navbarDom.classList.add('navbar-transparent');
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时清理所有资源
    this.routerSubscription?.unsubscribe();
    this.unlistenScroll?.();
  }
}

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