Angular技术问题：如何将Id存入localStorage且不在URL显示？

1. 调整导航逻辑，把ID存入localStorage #

直接去掉原代码里的queryParams配置，先把用户ID存到localStorage，再执行路由导航，同时删掉没必要的页面刷新操作（Angular路由导航会自动更新视图，手动刷新纯属多此一举）。

修改后的TS代码：

navigate(nav: string) {
  // 先把ID存入localStorage
  if (this.user?.id) {
    localStorage.setItem('userId', this.user.id);
  }
  // 直接导航到目标页面，不用传参数到URL
  this.router.navigate([`/${nav}`]);
}

2. 在Help组件中读取localStorage里的ID #

进入Help页面后，在组件初始化阶段读取存在localStorage里的ID，用于后续业务逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-help',
  templateUrl: './help.component.html',
  styleUrls: ['./help.component.css']
})
export class HelpComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    // 从localStorage获取ID
    const userId = localStorage.getItem('userId');
    if (userId) {
      // 这里写拿到ID后的处理逻辑，比如请求用户相关的帮助内容
      console.log('当前用户ID:', userId);
    }
  }

  // 可选：离开页面时清理localStorage里的ID（避免残留）
  ngOnDestroy(): void {
    localStorage.removeItem('userId');
  }
}

3. 保留原HTML代码即可 #

原HTML的点击逻辑不用改，还是用navigate('help')触发导航：

<li class="nav-item">
    <a (click)="navigate('help')" class="nav-link">How to play?</a>
</li>

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