Angular 2能否重写查询参数？URL格式转换技术咨询

当然可以！在Angular 2里，你完全能把URL里的查询参数转换成路径参数的格式，核心靠路由配置和Router服务就能实现，下面一步步给你讲具体怎么做：

第一步：配置带路径参数的路由 #

首先得在你的路由模块里定义好目标格式的路由规则，让Angular能识别这种路径参数的URL：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TargetComponent } from './target/target.component';

const routes: Routes = [
  // 定义带路径参数的路由，:param1和:param2是动态参数占位符
  { path: 'route/param1/:param1/param2/:param2', component: TargetComponent },
  // 可选：保留原查询参数路由，方便后续做重定向兼容
  { path: 'route', component: TargetComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

第二步：实现参数转换与导航 #

接下来分两种场景处理：

场景1：在组件内部处理参数跳转 #

如果是用户在组件内触发操作（比如点击按钮）需要转换参数，或者页面加载时自动转换当前的查询参数，可以通过ActivatedRoute获取查询参数，再用Router跳转到新路径：

// target.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html',
  styleUrls: ['./target.component.css']
})
export class TargetComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit(): void {
    // 订阅查询参数变化
    this.route.queryParams.subscribe(params => {
      const param1 = params['param1'];
      const param2 = params['param2'];

      // 当查询参数存在时，跳转到路径参数格式的URL
      if (param1 && param2) {
        this.router.navigate([
          '/route/param1', 
          param1, 
          'param2', 
          param2
        ]);
      }
    });
  }
}

场景2：通过路由守卫自动重定向 #

如果要处理外部用户直接访问带查询参数的旧URL的情况，推荐用路由守卫（比如CanActivate）来自动重定向到新格式的URL，这样用户体验更流畅：

先创建路由守卫：

// redirect.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RedirectGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const queryParams = route.queryParams;
    // 检查是否存在需要转换的查询参数
    if (queryParams['param1'] && queryParams['param2']) {
      // 跳转到路径参数格式的URL
      this.router.navigate([
        '/route/param1', 
        queryParams['param1'], 
        'param2', 
        queryParams['param2']
      ]);
      return false; // 阻止原路由激活
    }
    return true; // 允许进入原路由
  }
}

然后把守卫加到原查询参数路由上：

// app-routing.module.ts
const routes: Routes = [
  { path: 'route/param1/:param1/param2/:param2', component: TargetComponent },
  { path: 'route', component: TargetComponent, canActivate: [RedirectGuard] }
];

这样设置后，不管是内部页面跳转还是外部访问旧URL，都能顺利把https://local_app/route?param1=1&param2=2转换成https://local_app/route/param1/1/param2/2的格式啦。

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