angular - 如何刷新路由的解析数据

Question

考虑以下路由配置：

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

用户数据由UserResolverroute 的任何子级检索/user/:uid。使用此数据，可以通过导航到查看用户配置文件/user/:uid，然后通过导航到进行编辑/user/:uid/edit。成功编辑后，预计会被重定向到用户更新的个人资料 ( /user/:uid)。

但是，视图和编辑页面都是已解析路由的子级，从一个导航到另一个时不会触发解析器。

因此，当从编辑组件导航回视图组件时，显示的数据仍然是旧的、未更新的数据。

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

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

score 24 · Accepted Answer

我已经测试了解决方案“runGuardsAndResolvers”，它适用于我的用例，在每个子页面更改时都会调用解析器。

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

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

score 7 · Accepted Answer

您可以在路由配置中使用一个名为“runGuardsAndResolvers”的参数，该参数将影响解析器的运行时间。在这种情况下，您可能希望将其设置为“始终”。这意味着解析器将在该路由的子路由更改时运行。有关更多信息，请参阅路线文档。

score 5 · Accepted Answer

你可以尝试这样的事情：

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});
}

score 0 · Accepted Answer

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

angular - 如何刷新路由的解析数据

4 回答 4

Related

Reference