Angular 5路由隐藏查询参数传递方法及无中间件传id可行性

当然可以！你完全不需要依赖服务（Service）或本地存储（Local Storage），就能在Angular 5里传递类似id这类不想暴露在URL中的参数。下面是两种实用的方案：

方案1：使用skipLocationChange配合查询参数 #

这种方式可以让你传递参数，但不会更新浏览器的URL，也就不会把参数暴露出来，完美适配你不想用显式路由参数的场景。

步骤： #

1. 在发起导航的组件中：
   使用Router.navigate()时，通过navigationExtras设置queryParams传递参数，同时开启skipLocationChange: true来阻止URL更新：

   import { Router } from '@angular/router';
   
   constructor(private router: Router) {}
   
   goToHeroDetail(heroId: number) {
     this.router.navigate(['/hero-detail'], {
       queryParams: { id: heroId },
       skipLocationChange: true // 关键：不修改浏览器地址栏
     });
   }
   

2. 在目标组件（hero-detail）中：
   通过ActivatedRoute订阅获取传递的参数：

   import { ActivatedRoute } from '@angular/router';
   import { OnInit } from '@angular/core';
   
   export class HeroDetailComponent implements OnInit {
     heroId: number;
   
     constructor(private route: ActivatedRoute) {}
   
     ngOnInit() {
       this.route.queryParams.subscribe(params => {
         this.heroId = +params['id']; // 转换为数字类型
       });
     }
   }
   

注意：这种方式的小局限是，如果用户刷新页面，参数会丢失——毕竟参数没存在URL里。但如果你的场景不需要刷新后保留参数，这完全够用。

方案2：利用路由配置的data属性（静态/半动态场景） #

如果你的参数是固定值，或者可以通过路由守卫动态注入，那么路由配置里的data字段是个不错的选择。

静态场景示例： #

直接在路由定义中写入固定参数：

const routes: Routes = [
  {
    path: 'hero-detail',
    component: HeroDetailComponent,
    data: { id: 123 } // 静态参数
  }
];

目标组件中获取：

ngOnInit() {
  this.heroId = this.route.snapshot.data['id'];
}

动态场景（结合路由守卫）： #

如果要传递动态的id，可以用CanActivate守卫来修改路由的data：

1. 创建路由守卫：

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

@Injectable()
export class HeroDataGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 从导航参数中拿到动态id
    const heroId = route.queryParams['id'];
    route.data['id'] = heroId; // 把动态id存入路由data
    return true;
  }
}

2. 更新路由配置：

const routes: Routes = [
  {
    path: 'hero-detail',
    component: HeroDetailComponent,
    canActivate: [HeroDataGuard],
    data: { id: null } // 初始化占位
  }
];

3. 目标组件从route.data获取参数：

ngOnInit() {
  this.route.data.subscribe(data => {
    this.heroId = +data['id'];
  });
}

总结 #

• 如果是临时传递动态参数且不需要刷新保留，优先用方案1，简单直接。
• 如果需要参数和路由逻辑绑定（比如权限控制场景），可以用方案2结合路由守卫。

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