Angular中CanMatch接口已弃用问题求助

TS6385错误提示CanMatch已被弃用，这是因为Angular 16+版本开始弃用类实现CanMatch接口的方式，转而推荐使用函数式守卫CanMatchFn，以此提升代码的树摇优化效果并简化守卫实现。

以下是两种有效的替代方案：

方案一：转为独立的函数式CanMatch守卫 #

将原canMatch方法的逻辑抽离为独立的函数式守卫，保留原AuthGuard类中CanActivate和CanActivateChild的实现：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Route, RouterStateSnapshot, UrlSegment, UrlTree, CanMatchFn } from '@angular/router';
import { Observable } from 'rxjs';

// 独立的函数式CanMatch守卫
export const authCanMatch: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
  // 替换为你的权限校验逻辑
  return true;
};

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }

  canActivateChild(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

路由配置修改 #

原路由配置中使用canMatch: [AuthGuard]的地方，改为使用函数式守卫：

const routes: Routes = [
  {
    path: 'protected',
    canMatch: [authCanMatch], // 替换为新的函数式守卫
    component: ProtectedComponent
  }
];

方案二：在类中复用逻辑，通过函数式守卫调用 #

如果需要在类中复用权限校验逻辑，可以将canMatch的核心逻辑保留在AuthGuard类中，再通过函数式守卫注入类实例调用方法：

import { Injectable, inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Route, RouterStateSnapshot, UrlSegment, UrlTree, CanMatchFn } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }

  canActivateChild(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }

  // 抽离CanMatch的核心校验逻辑
  checkCanMatch(route: Route, segments: UrlSegment[]) {
    // 替换为你的权限校验逻辑
    return true;
  }
}

// 函数式守卫，注入AuthGuard实例调用校验方法
export const authCanMatch: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
  const authGuard = inject(AuthGuard);
  return authGuard.checkCanMatch(route, segments);
};

这种方式既保留了类中逻辑的复用性，又符合Angular最新的守卫设计规范。

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