Angular 9项目xng-breadcrumbs页面刷新后消失问题如何解决？

xng-breadcrumb 组件默认会监听 Angular 的 NavigationEnd 路由事件，在每次路由跳转完成后更新面包屑数据。正常路由跳转时，组件会沿跳转路径依次收集各级路由的面包屑配置，所以可以正常渲染完整层级。而页面刷新时，Angular 只会直接加载当前激活的全路径路由，不会触发历史跳转流程的导航事件，组件默认没有主动递归解析全路径下所有路由节点配置的逻辑，就会出现面包屑内容为空的问题。

你可以通过以下三种常用方式修复：

• 开启组件自动解析全路径配置
  在 xng-breadcrumb 组件的输入属性中添加 [autoResolve]="true"，该配置会让组件初始化时主动递归读取当前全路径下所有层级的路由配置，无需依赖历史导航事件就能收集到完整的面包屑数据。
  代码示例：

<xng-breadcrumb [autoResolve]="true"></xng-breadcrumb>

• 补全全层级路由的面包屑配置
  确保从根路由到当前子路由的每一层路由的 data 属性中都显式配置了 breadcrumb 字段，不要仅在最内层子路由单独配置。
  路由配置示例：

const routes: Routes = [
  {
    path: 'parent',
    data: { breadcrumb: '父级页面' },
    children: [
      {
        path: 'child2',
        data: { breadcrumb: '子级页面2' },
        component: Child2Component
      }
    ]
  }
]

• 手动触发面包屑数据更新
  如果你使用了自定义面包屑动态映射逻辑，没有依赖默认的路由 data 配置，可以在应用根组件的 ngOnInit 钩子中，调用 BreadcrumbService 的 set() 方法，按路径层级手动设置每一级的面包屑文本即可。

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