Angular 15升级到16后RouterEvent类型不兼容问题咨询

问题场景 #

将Angular项目从15版本升级到16版本后，以下订阅路由事件的代码出现编译错误：

if (this.menuOpenSubscription === undefined) {
   this.menuOpenSubscription = this.router.events.subscribe(
    (event: RouterEvent) => this.handleNavigationEnd(event)); // ng16中报错
}

编译错误信息（翻译后） #

重载1（共2个）：'(observerOrNext?: Partial<Observer<Event_2>> | ((value: Event_2) => void)): Subscription'，出现如下错误。
[1] 参数类型'(event: RouterEvent) => void'无法赋值给类型'Partial<Observer<Event_2>> | ((value: Event_2) => void)'。
[1] 类型'(event: RouterEvent) => void'无法赋值给类型'(value: Event_2) => void'。
[1] 参数'event'和'value'的类型不兼容。
[1] 类型'Event_2'无法赋值给类型'RouterEvent'。
[1] 类型'ActivationEnd'缺少'RouterEvent'类型中的以下属性：id, url
重载2（共2个）：'(next?: (value: Event_2) => void, error?: (error: any) => void, complete?: () => void): Subscription'，出现如下错误。
[1] 参数类型'(event: RouterEvent) => void'无法赋值给类型'(value: Event_2) => void'。
[1] 参数'event'和'value'的类型不兼容。
[1] 类型'Event_2'无法赋值给类型'RouterEvent'。

原因分析 #

Angular 16对Router.events的类型约束进行了严格化：Router.events发射的事件集合不仅包含RouterEvent子类（如NavigationEnd），还包含像ActivationEnd这类不属于RouterEvent体系的事件。直接将订阅回调的参数声明为RouterEvent，会导致TypeScript检测到类型不匹配——因为事件流中存在不符合RouterEvent类型的事件。

解决方案 #

方案1：回调内先判断事件类型 #

在回调函数中先校验事件是否为RouterEvent实例，再执行处理逻辑：

if (this.menuOpenSubscription === undefined) {
  this.menuOpenSubscription = this.router.events.subscribe(
    (event) => {
      if (event instanceof RouterEvent) {
        this.handleNavigationEnd(event);
      }
    }
  );
}

方案2：使用RxJS的filter操作符过滤事件 #

通过filter操作符提前筛选出RouterEvent类型的事件，再订阅处理，类型会自动推导正确：

import { filter } from 'rxjs/operators';
import { RouterEvent } from '@angular/router';

// ...

if (this.menuOpenSubscription === undefined) {
  this.menuOpenSubscription = this.router.events.pipe(
    filter(event => event instanceof RouterEvent)
  ).subscribe(
    (event) => this.handleNavigationEnd(event)
  );
}

更精准的处理（如果仅需NavigationEnd事件） #

如果你的handleNavigationEnd逻辑只针对NavigationEnd事件，可以直接过滤该类型，避免不必要的类型判断：

import { filter } from 'rxjs/operators';
import { NavigationEnd } from '@angular/router';

// ...

if (this.menuOpenSubscription === undefined) {
  this.menuOpenSubscription = this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(
    (event) => this.handleNavigationEnd(event)
  );
}

内容的提问来源于stack exchange，提问作者js-newb