Angular 6中Router事件订阅报错：Property 'url'不存在于Event类型

我完全懂你遇到的这个头疼问题——代码实际运行没问题，但TypeScript编译就是卡着报错，这本质是Angular Router事件的类型特性导致的。

先还原下你遇到的场景：
你的原代码：

import { Component } from '@angular/core'; 
import { Route, Router } from '@angular/router'; 

@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
constructor(router: Router) { 
  router.events.subscribe(e => { 
    sessionStorage.setItem('redirectAuthPreviousRouteUrl',e.url); 
  }); 
}

编译时抛出的错误：

src/app/app.component.ts(18,105): error TS2339: Property 'url' does not exist on type 'Event'.

问题根源 #

Router的events流会发出多种不同类型的事件，比如导航开始的NavigationStart、导航完成的NavigationEnd、导航取消的NavigationCancel等，不是所有事件都带有url属性。TypeScript的严格类型检查不知道你要处理的是哪类事件，所以会抛出属性不存在的报错。

正确的解决方式 #

我们需要通过类型守卫明确告诉TypeScript：当前处理的是带有url属性的事件类型，这样编译就能顺利通过，同时也能避免潜在的运行时风险。

修改后的完整代码

1. 先导入你需要处理的目标事件类型（比如最常用的NavigationEnd，即导航完成时的事件）：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router'; // 新增导入目标事件类型

2. 在订阅回调中添加类型判断，只处理符合条件的事件：

@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent { // 注意：你原代码漏了类定义，这里补上，否则编译也会报错
  constructor(router: Router) { 
    router.events.subscribe(e => { 
      // 用instanceof做类型判断，确保当前事件是带有url属性的NavigationEnd
      if (e instanceof NavigationEnd) {
        sessionStorage.setItem('redirectAuthPreviousRouteUrl', e.url);
      }
    }); 
  }
}

扩展说明 #

如果你需要处理其他带有url属性的事件（比如导航开始时的NavigationStart），可以扩展判断条件：

if (e instanceof NavigationEnd || e instanceof NavigationStart) {
  sessionStorage.setItem('redirectAuthPreviousRouteUrl', e.url);
}

这种方式既满足了TypeScript的类型校验要求，也能保证你只在合适的事件时机去获取url，比直接用any类型更严谨。

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