如何刷新路线的解析数据

How to refresh a route's resolved data

考虑以下路由配置:

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    resolve: {
      app: AppResolver
    },
    children: [
      {
        path: 'user/:uid',
        resolve: {
          user: UserResolver
        },
        children: [
          {
            path: '',
            component: ViewUserComponent
          },
          {
            path: 'edit',
            component: EditUserComponent
          }
        ]
      }
    ]
  }
];

UserResolver 为路线 /user/:uid 的任何 children 检索了用户数据。 使用此数据,可以通过导航到 /user/:uid 查看用户配置文件,然后通过导航到 /user/:uid/edit 进行编辑。 成功编辑后,人们会期望被重定向到用户的更新个人资料(/user/:uid)。

但是,查看和编辑页面都是已解析路由的 children,从一个导航到另一个时不会触发解析器。

因此,当从编辑组件导航回视图组件时,显示的数据仍然是旧的,non-updated。

是否有任何方法可以使已解析的 user 数据无效以强制解析器从服务器再次获取它?或者还有其他方法可以达到这种效果吗?

app数据没有改变,我们不应该重新加载它。

您可以在路由配置中使用一个名为 'runGuardsAndResolvers' 的参数,它会影响解析器 运行 的时间。在这种情况下,您可能希望将其设置为 'always'。这意味着只要该路由的子路由发生变化,解析器就会 运行 。有关详细信息,请参阅 the route documentation

我已经测试了解决方案 'runGuardsAndResolvers',它适用于我的用例,每次子页面更改时都会调用解析器。

它只是将此选项添加到您希望以这种方式表现的路线部分。

export const ROUTES: any = [
  {
    path: 'project/:name',
    runGuardsAndResolvers: "always",
    component: ProjectComponent,
    resolve: { project: ProjectResolver },
    children: [
      ...

通过上面的方式我可以调用解析器。但它不会更改来自我的后端服务器的数据,所以我得到了一个解决方案,我在成功部分再次调用了我的服务方法,并从后端服务器获取了新的更改数据。

您可以尝试这样的操作:

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.parent.data.subscribe(data => {
    this.profile = data.profile;
  });
}

updateProfile(newProfile) {
  (this.activatedRoute.parent.data as BehaviorSubject<any>).next({profile: newProfile});
}