Angular2路由-路由更改时保持组件状态[重复]

Posted 2023-02-23

【中文标题】Angular2路由-路由更改时保持组件状态[重复]

【英文标题】：Angular2 Routing - keeping state of component when route changes [duplicate]

【发布时间】：2016-02-29 15:14:52

【问题描述】：

我有一个应用程序，在路由后面有视图，我需要能够从路由更改的点继续，但是返回后，组件处于其初始状态。

有什么方法可以保持组件的状态吗？

【问题讨论】：

与注入单个组件的提供程序相反，关键可能是拥有应用程序级别的提供程序/服务，这里稍微解释一下：***.com/a/32807310。正如答案中所解释的，每次生成路由的组件时都会创建组件级提供程序。应用级提供程序（在bootstrap 中声明）创建一次（有关更多信息，请参阅此站点：syntaxsuccess.com/viewarticle/routing-in-angular-2）。如果您想出一个好的解决方案，请在此处发布。

【参考方案1】：

更新 2

现在https://github.com/angular/angular/pull/13124 为新路由器修复了这个问题（Angular 2.3），它允许提供自定义重用策略。

示例参见https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

Angular 文档https://angular.io/api/router/RouteReuseStrategy

更新 2 此答案仅适用于很久以前停产的路由器版本。

请参阅https://angular.io/docs/ts/latest/guide/router.html#!#guards，了解如何在当前路由器中执行此操作。

原创

如果你的组件实现CanReuse 并从

返回true

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) 
  return true;

然后组件被保留和重复使用，而不是被销毁和重新创建。

另一种方法是将数据保存在共享服务中，并在重新创建组件时从那里获取它们。

【讨论】：

CanReuse 链接已损坏。

此答案适用的路由器早已不复存在。如何在当前路由器中进行操作，请参阅angular.io/docs/ts/latest/guide/router.html#!#guards。

【参考方案2】：

在这个确切的场景中存在一个未解决的问题 https://github.com/angular/angular/issues/5275

只有当新组件和旧组件（当您点击“返回”按钮时）是相同的组件类型时，您才能使用routerCanReuse。

正如 Günter 建议的那样，如果组件类型不同，您现在唯一的选择是将状态保持在共享服务中。

【讨论】：

经过大量搜索后，这对我来说非常有效：softwarearchitekt.at/post/2016/12/02/…

@PhilipEnc 你是怎么做到的？如果我在使用时导航，我的所有路线都不起作用。我正在使用延迟加载。

我的应用没有延迟加载。可能就是这样的区别。

@PhilipEnc 虽然可能为时已晚，但这正是我想要的！我有一个组件需要一些普通的 js 代码才能运行，当组件被销毁并再次创建时，这些 js 代码会中断。通过保持此链接实现的状态，现在一切都很完美:)