angular 应用中无法通过 `window.location` 获取查询参数，是因为路由导航后浏览器地址栏的 url 被 angular router 重写（尤其是启用 `hashlocationstrategy` 时），原始 query string 可能被截断或丢失；应使用 `activatedroute.queryparams` 响应式订阅获取。
在 Angular 中，直接访问 window.location.search 或 window.location.href 来提取查询参数往往失败——尤其当应用使用默认的 HashLocationStrategy（即 URL 中包含 #，如 www.abc.com/#/?accountId=123）时，浏览器会将 ? 之后、# 之前的内容视为「fragment 外的非 hash 部分」，而 Angular 的路由机制可能已将其剥离或未同步更新到 window.location 的原始属性中。你观察到 window.location.href 返回 www.abc.com/#/，正是因为 Angular Router 主动管理了 URL 的 hash 段，而忽略了 hash 前的 query string（该部分在 hash 模式下不参与路由解析，也不保证被保留）。
✅ 正确做法：始终使用 Angular Router 提供的响应式 API：
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-example',
template: `<p>Account ID: {{ accountId }}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1694" title="INFINITE ALBUM"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680309477082.jpg" alt="INFINITE ALBUM" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1694" title="INFINITE ALBUM">INFINITE ALBUM</a>
<p>面向游戏玩家的生成式AI音乐</p>
</div>
<a href="/ai/1694" title="INFINITE ALBUM" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>`
})
export class ExampleComponent implements OnInit, OnDestroy {
accountId: string | null = null;
private queryParamsSub!: Subscription;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// 订阅 queryParams —— 自动响应 URL 中 ? 后的参数变化（含 hash 模式下的 #?...）
this.queryParamsSub = this.route.queryParams.subscribe(params => {
this.accountId = params['accountId'] || null;
console.log('Query params received:', params); // { accountId: '123' }
});
}
ngOnDestroy() {
// ✅ 必须取消订阅，防止内存泄漏
this.queryParamsSub?.unsubscribe();
}
}? 关键说明：
- ActivatedRoute.queryParams 是一个 Observable
，在 HashLocationStrategy 下依然有效（Angular 会自动从 #?accountId=123 或 #/?accountId=123 中解析参数）； - 若 URL 为 www.abc.com/#/?accountId=123（标准 hash 模式写法），参数可正常捕获；
- 若 URL 为 www.abc.com?accountId=123#/（query 在 hash 前），则属于非标准行为，Angular 默认不解析——此时应确保服务端或跳转逻辑将 query 放入 hash 段（如重定向为 www.abc.com/#/?accountId=123），或改用 PathLocationStrategy（需服务器支持）；
- 如需一次性读取（非响应式），可用 this.route.snapshot.queryParams，但注意它仅捕获组件初始化时的快照，不响应后续 URL 参数变更。
? 小贴士：开发调试时，可在浏览器控制台手动测试 URL 解析逻辑：
// 在开发者工具中运行（确保当前页面 URL 含 query）
new URL(window.location.href).searchParams.get('accountId') // 仅适用于 PathLocationStrategy 或完整 URL 场景总之，绕过 Angular Router 直接操作 window.location 违背框架设计原则，也易受路由策略影响。坚持使用 ActivatedRoute.queryParams，既健壮又符合 Angular 最佳实践。
