Angular 15升级后报错：'redirectTo'需通过['redirectTo']访问

这个错误是因为Angular 15对ActivatedRouteSnapshot.data的类型定义做了严格限制，data的类型为Data，仅包含索引签名，无法通过点语法直接访问属性，必须使用方括号索引方式，或者通过类型定义明确属性来解决。

方法一：直接使用索引访问 #

直接修改代码中访问redirectTo的方式，把点语法改成方括号索引：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RedirectGuardService {

  constructor(private router: Router) { }

  canActivate(routeSnapshot: ActivatedRouteSnapshot): boolean | Promise<boolean> {
    // 改用索引方式访问redirectTo
    this.router.navigateByUrl(routeSnapshot.data['redirectTo'], {skipLocationChange: true});
    return true;
  }
}

方法二：定义路由数据类型（更规范） #

通过自定义接口明确路由data的结构，配合类型断言使用，既能解决报错，还能获得TypeScript的类型提示：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';

// 定义路由数据的类型
interface RedirectRouteData {
  redirectTo: string;
}

@Injectable({
  providedIn: 'root'
})
export class RedirectGuardService {

  constructor(private router: Router) { }

  canActivate(routeSnapshot: ActivatedRouteSnapshot): boolean | Promise<boolean> {
    // 用类型断言明确data的结构
    const redirectData = routeSnapshot.data as RedirectRouteData;
    this.router.navigateByUrl(redirectData.redirectTo, {skipLocationChange: true});
    return true;
  }
}

内容的提问来源于stack exchange，提问作者Francesco Pio Prisco