Angular应用刷新页面时如何同步当前页标题至导航栏

你当前直接读取this.router.routerState.snapshot.root.data的写法存在逻辑缺陷：Angular 路由为树状嵌套结构，root 仅指向最顶层的根路由节点，你在业务路由（如MassEmail）上配置的data.displayName是挂载在对应子路由节点上的，并不会默认挂在根路由节点。
通过菜单触发跳转时，路由事件触发时序的问题会让你偶然拿到子路由挂载的临时值，但浏览器刷新时路由会从根节点开始重新初始化，此时直接读取根节点的data自然无法获取到子路由上配置的显示名称。

推荐方案：递归获取当前激活路由的配置，在路由初始化/跳转完成时更新标题 #

不要直接读取根路由的data，编写通用方法遍历路由树，定位到当前匹配的最底层激活路由，读取它的data配置；同时在组件初始化、每次路由跳转完成两个时机触发标题更新，覆盖正常跳转和浏览器刷新两种场景。
在负责渲染菜单栏的组件中添加如下逻辑：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-nav-menu',
  template: `<!-- 你的菜单栏模板，直接使用selectedDisplayName渲染即可 -->`
})
export class NavMenuComponent implements OnInit {
  selectedDisplayName = '';

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    // 组件初始化时先执行一次更新，覆盖页面刷新场景
    this.syncPageDisplayName();
    // 监听路由跳转完成事件，每次跳转后同步更新标题
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(() => this.syncPageDisplayName());
  }

  // 递归遍历路由树，找到当前实际激活的最底层路由
  private getCurrentActivatedRoute(route: ActivatedRoute): ActivatedRoute {
    let activeRoute = route;
    while (activeRoute.firstChild) {
      activeRoute = activeRoute.firstChild;
    }
    return activeRoute;
  }

  private syncPageDisplayName(): void {
    const currentRoute = this.getCurrentActivatedRoute(this.activatedRoute.root);
    // 若TS版本低于3.7不支持??，可替换为||
    this.selectedDisplayName = currentRoute.snapshot.data['displayName'] ?? '';
  }
}

原有路由配置不需要做任何修改，这套逻辑同时兼容普通路由跳转、懒加载路由、浏览器强制刷新的场景。

可选扩展：同步更新浏览器标签页标题 #

如果你需要同时把页面标题同步到浏览器标签栏，可以搭配Angular内置的Title服务使用，在syncPageDisplayName方法中追加逻辑即可：

import { Title } from '@angular/platform-browser';

// 构造函数中注入private title: Title
private syncPageDisplayName(): void {
  const currentRoute = this.getCurrentActivatedRoute(this.activatedRoute.root);
  const displayName = currentRoute.snapshot.data['displayName'] ?? '';
  this.selectedDisplayName = displayName;
  // 同步设置浏览器标签标题
  if (displayName) {
    this.title.setTitle(`${displayName} - 你的应用名称`);
  }
}

• 禁止直接读取routerState.snapshot.root.data获取业务路由配置，根路由节点不会自动继承子路由的data属性
• 标题更新逻辑必须在NavigationEnd事件触发后执行，避免路由树未初始化完成就取值导致返回空值
• 上述递归查找激活路由的逻辑完全兼容懒加载模块路由，不需要针对懒加载场景做额外适配

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