Angular 5页面跳转时Query Parameters消失问题求助

我之前也碰到过一模一样的情况，查询参数莫名其妙就没了，折腾了好一阵才找到根源。结合你的问题，咱们一步步来排查和解决：

1. 先排查服务器端配置（最容易被忽略的点） #

如果你的Angular用的是默认的PathLocationStrategy（URL不带#的模式），服务器必须配置正确的fallback规则，否则直接访问带参数的路由时，服务器可能会返回404或者错误重定向，导致查询参数丢失。

举两个常见服务器的正确配置例子：

• Nginx：确保配置里包含这条规则，让所有请求转发到Angular入口文件：

  try_files $uri $uri/ /index.html;
  

• Apache：在.htaccess文件中添加以下规则：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

如果服务器配置不对，哪怕Angular代码完全正常，直接访问带参数的URL也会被服务器重定向，参数自然就没了。

2. 检查组件内是否有意外的导航操作 #

看看你的TestComponent里有没有在初始化阶段（比如ngOnInit、构造函数）调用了router.navigate，但没保留查询参数？比如：

// 错误写法：会直接丢掉查询参数
this.router.navigate(['/TestComponent']);

// 正确写法：保留现有查询参数
this.router.navigate([], { 
  relativeTo: this.route,
  queryParamsHandling: 'preserve'
});

如果有这类代码，页面加载后会自动跳转到不带参数的URL，自然拿不到参数。

3. 检查路由守卫是否做了无参数重定向 #

如果你的路由配置了CanActivate、CanLoad之类的守卫，看看守卫里有没有重定向逻辑，而且没传递原查询参数。比如：

// 错误写法：重定向时没带参数
return this.router.navigate(['/TestComponent']);

// 正确写法：带上原查询参数
return this.router.navigate(['/TestComponent'], {
  queryParams: route.queryParams
});

4. 换一种订阅查询参数的方式（虽然你的写法没问题，但可以试试） #

你的订阅写法本身是对的，但可以试试用queryParamMap，有时候能避开一些隐性问题：

this.route.queryParamMap.subscribe((paramMap) => {
  const otherName = paramMap.get('OtherName');
  if (otherName) {
    // 处理参数逻辑
  }
});

5. 检查全局路由事件监听 #

看看有没有在全局（比如AppComponent或者路由模块）订阅了router.events，并且在NavigationEnd这类事件里做了重定向操作，不小心丢掉了参数。

快速验证方法 #

可以先把Angular切换成HashLocationStrategy测试，在AppModule里配置：

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ]
})
export class AppModule {}

然后访问http://example.com:8080/#/TestComponent?OtherName=foo，如果参数不消失了，那基本可以确定是服务器配置的问题。

按照上面的步骤排查，应该能快速定位并解决问题！

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