想要在 Angular 2 中路由时防止重新创建组件 [英] Want to prevent Component recreation while routing in Angular 2

问题描述

假设我们有两个路由 Dashboard 和 Profile.Dashboard 具有动态标签功能，如 Google 电子表格.我想做一些交互(构建图表，可视化一些数据)在 Dashboard 中创建选项卡.现在，如果我路由到 Profile，然后路由回 Dashboard，我想查看 Dashboard 中的那些选项卡之前的内容.这意味着，我想在客户端维护状态.AFAIK 在组件之间路由时，它会重新创建组件.是否可以在使用 angular 2 路由时制作类似应用程序的电子表格?我需要使用路由，因为在我的应用程序中我必须使用 LazyLoading 功能.

Let's say we have two routes Dashboard and Profile. Dashboard has dynamic tabs feature like Google spreadsheet. I want to do some interactions(build charts, visualizing some data) creating tabs in the Dashboard. Now, if I route to Profile and then route back to Dashboard, I want to see what was before in those tabs in Dashboard. It means, I want to maintain the state in the client side. AFAIK while routing between components, it recreates components. Is it possible to make spreadsheet like application while using angular 2 routing? I need to use routing because in my application I have to use LazyLoading feature.

那应该是什么想法?我是 angular 2 的新手.

So what should be the idea? I am new to angular 2.

推荐答案

当前组件仅被重用，只有路由参数发生变化，同时保持在同一路由上.

Currently components are reused only when only route parameters change while staying on the same route.

如果路由发生变化，当新路由添加相同的组件时，会重新创建该组件.

If the route is changed, event when the new route adds the same component, the component is recreated.

首选的解决方法是将模型保留在一个共享服务中，该服务在路由更改期间保持活动状态，并使用来自该服务的数据来恢复组件的先前状态.

The preferred workaround is to keep the model in a shared service that stays alive during route changes and use the data from this service to restore the previous state of the component.

有人提到有计划支持路由器的自定义重用策略，但没有时间表.

It was mentioned that there are plans to support custom reuse strategies with the router but no timeline when this will become available.

更新

对自定义重用策略的支持已添加到 Angular2.

Support for custom reuse strategy was added to Angular2.

另见

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

• https://github.com/angular/angular/issues/7757#issuecomment-236737846

Angular2 路由器 2.0.0 在使用不同参数加载相同 url 时不重新加载组件?

这篇关于想要在 Angular 2 中路由时防止重新创建组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！