Angular页面刷新后保留顶部标题Finance/voucher显示问题咨询

根因说明 #

当前FormTitleService仅将标题存储在运行时内存中，页面刷新后内存数据清空，仅能返回默认的Finance前缀，丢失了voucher后缀。

修复步骤 #

方案1：新增本地存储持久化标题（推荐，改动最小） #

1. 修改FormTitleService代码，增加存储逻辑：

// FormTitleService 对应ts文件
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FormTitleService {
  private titleSubject = new BehaviorSubject<string>('');
  // 本地存储的key名，可自定义
  private readonly FORM_TITLE_KEY = 'top_bar_form_title';

  constructor() {
    // 服务初始化时读取本地存储的历史标题
    const savedTitle = sessionStorage.getItem(this.FORM_TITLE_KEY);
    if (savedTitle) {
      this.titleSubject.next(savedTitle);
    }
  }

  // 原有设置标题的方法，新增同步存储逻辑
  setFormTitle(title: string): void {
    this.titleSubject.next(title);
    sessionStorage.setItem(this.FORM_TITLE_KEY, title);
  }

  getFormTitle() {
    return this.titleSubject.asObservable();
  }
}

若需要浏览器关闭后仍保留标题，可将sessionStorage替换为localStorage

方案2：路由动态拼接标题（无存储依赖，适合标题和路由绑定的场景） #

1. 先修改TopBarComponent注入Router：

// TopBarComponent 的constructor新增注入
constructor(
    injector: Injector,
    private _formTitleService: FormTitleService,
    private router: Router // 新增
) {
    super(injector);
}

2. 修改getFormTitle方法：

getFormTitle(){
    this._formTitleService.getFormTitle()
        .subscribe(name => {
            // 服务有值直接用，无值从当前路由拼接
            this.formName = name || this.getTitleFromRouter();
            // 拼接后存回服务，后续无需重复计算
            if(!name) this._formTitleService.setFormTitle(this.formName);
        });
}

// 新增路由拼接标题的方法
private getTitleFromRouter(): string {
    // 拆分当前路由路径，过滤空值
    const pathSegments = this.router.url.split('/').filter(seg => seg);
    // 首字母大写后用/拼接，例如路径/finance/voucher 会转换为 Finance/Voucher
    return pathSegments.map(seg => seg.charAt(0).toUpperCase() + seg.slice(1)).join('/');
}

两种方案任选其一即可实现刷新后仍完整显示Finance/voucher的需求。

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