Angular 路由器：将旧系统 URL 重定向到新系统 URL

Question

使用 Angular 12+

我们的旧系统有 ASPX 页面和不同的查询字符串值。我们的新系统基于 Angular，因此 ASPX 页面 links/query 字符串不再存在。有没有办法扩展路由器，以便在 ASPX 页面请求到来时将其重定向到一组已转换的查询参数和正确的 Angular 路由？会有大量排列，因此我们需要通过逻辑重写器运行 URL，而不仅仅是路由器映射。

现在，我有一个 404Component 查看 URL，然后决定新的 URL，并进行重定向。

客户将旧的 ASPX 页面添加为书签，因此需要支持。

Answer 1

您需要一个基于 CanActivate Guard

的实现

创建一个重定向服务，它将确定 URL 重定向和 return URL 最终目的地 URL（下面的示例实现）

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

@Injectable()
export class RedirectGuard implements CanActivate {
    constructor(public router: Router) {}

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
        const originalRequestUrl = state.url;

        if(this.isOldUrl(originalRequestUrl)) {
            this.router.navigate([this.getRedirectUrl(originalRequestUrl)]);
            return false;
        }

        return true;
    }

    isOldUrl(url: string): boolean {
        // pattern check on URL to determine if url needs redirect
        return true;
    }

    getRedirectUrl(url: string): string {
        // logic to return redirect-url of final destination
        // returning same url for now
        return url;
    }

}

将此地图添加（或替换）到您的路由器地图（捕获所有地图定义）

{
    path: '**',
    canActivate: [ RedirectGuard ],
    redirectTo: '/'
}

现在，任何不匹配的 URL (**) 现在应该由 RedirectGuard 服务解决 class

Angular 路由器：将旧系统 URL 重定向到新系统 URL

Angular Router: Redirect Old System URL to New URL

angular

router