【问题标题】:How to refresh a route's resolved data如何刷新路由的解析数据
【发布时间】:2017-10-29 04:02:20
【问题描述】:

考虑以下路由配置:

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

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

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

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

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

【问题讨论】:

  • 使用共享服务而不是父组件来处理数据。
  • @HarryNinh 我可以,但这意味着复制订阅路由参数的代码并在每个子组件中调用服务,同时在共享服务中重新实现缓存策略。这似乎违背了路由解析器的目的。
  • 关于这个主题的大量搜索。据我所知,处理此问题的唯一方法是订阅事件并手动重新加载数据。理想情况下,您会构建应用程序。这样您就可以通过代码重用来做到这一点,但即使这样也是一个挑战,因为重用 Resolve 并不是因为获取路由器状态而变得微不足道。我选择在我的 Resolve 中创建一个公共函数,可以重复使用并绕过 resolve 函数本身。这是一个可以改进的明确领域。我见过很多人遇到这种问题。

标签: angular typescript angular2-router


【解决方案1】:

你可以试试这样的:

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

【讨论】:

  • 我只是想在不更改 URL 的情况下更新数据。这真的对我有用。
【解决方案2】:

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

【讨论】:

    【解决方案3】:

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

    仅在您希望以这种方式运行的部分路线中添加此选项。

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

    【讨论】:

    • 在很多用例中,这就像配置修复一样简单!整洁的!正是我在寻找什么......@vlaurin:这个答案应该被标记为答案?
    • 有什么方法可以在子路由上使用 runGuardsAndResolvers 吗?我尝试添加这个,但它似乎不起作用。
    • 你拯救了我的一天。
    【解决方案4】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-12-18
      • 1970-01-01
      • 2016-03-21
      • 1970-01-01
      • 2021-05-06
      • 2019-08-22
      • 2022-11-02
      • 2016-07-17
      相关资源
      最近更新 更多