Angular 14中如何在路由重定向前获取GET查询参数？

方案一：通过路由守卫拦截并存储参数 #

路由守卫能在路由跳转（包括重定向）前触发，正好用来捕获初始URL的查询参数：

1. 创建全局参数存储服务
   用来临时保存查询参数，方便后续组件取用：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ParamStoreService {
  private storedParams: Record<string, any> = {};

  saveParam(key: string, value: any): void {
    this.storedParams[key] = value;
  }

  getParam(key: string): any {
    return this.storedParams[key];
  }
}

2. 实现路由守卫
   在守卫里获取查询参数并存入服务：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
import { ParamStoreService } from './param-store.service';

@Injectable({ providedIn: 'root' })
export class QueryParamGuard implements CanActivate {
  constructor(
    private paramStore: ParamStoreService,
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 捕获查询参数
    const dogValue = route.queryParams['dog'];
    if (dogValue) {
      this.paramStore.saveParam('dog', dogValue);
    }
    // 允许路由继续执行（包括重定向）
    return true;
  }
}

3. 配置路由守卫
   给根路由添加守卫，确保重定向前触发参数捕获：

const routes: Routes = [
  { 
    path: '', 
    canActivate: [QueryParamGuard], 
    redirectTo: '/home/insert', 
    pathMatch: 'full' 
  },
  { path: 'home/insert', component: HomeInsertComponent },
  // 其他路由配置...
];

4. 在目标组件中取用参数
   在HomeInsertComponent里从服务取出参数，展示特定消息：

import { Component, OnInit } from '@angular/core';
import { ParamStoreService } from '../param-store.service';

@Component({
  selector: 'app-home-insert',
  templateUrl: './home-insert.component.html'
})
export class HomeInsertComponent implements OnInit {
  displayMessage = '';

  constructor(private paramStore: ParamStoreService) {}

  ngOnInit(): void {
    const dogMsg = this.paramStore.getParam('dog');
    if (dogMsg) {
      this.displayMessage = `收到专属消息：${dogMsg}`;
      // 这里可以结合弹窗、页面提示等方式展示消息
    }
  }
}

方案二：在根组件中直接捕获参数 #

如果你的重定向是路由默认配置，也可以在AppComponent的初始化阶段获取参数——因为根组件会在路由重定向之前加载：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ParamStoreService } from './param-store.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private paramStore: ParamStoreService
  ) {}

  ngOnInit(): void {
    const dogParam = this.route.snapshot.queryParams['dog'];
    if (dogParam) {
      this.paramStore.saveParam('dog', dogParam);
    }
  }
}

后续在HomeInsertComponent中取用参数的逻辑和方案一一致。

注意：如果你的URL里有转义引号（比如?dog="NiceDog!"），Angular会自动解析出正确的参数值NiceDog!，无需额外处理。

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