即使未导航到Angular 2，路线也可以保持活动状态 [英] Angular 2 keep route alive even when not navigated to it

问题描述

在角度2中，即使不导航到导航路线，也能保持其存活状态吗?我的目的是尝试将webgl画布放入角度为2的路线中.现在默认情况下，每当导航到一条路线时，它都会初始化该组件并加载所有需要的资源，然后在导航离开时会破坏该组件并从Dom中删除视图.这在使用webgl时会导致2个问题，主要的问题是只允许特定数量的webgl实例，否则可能会使图形卡超载.因此，如果该路线多次导航往返，则有可能达到极限，因为每次导航到该路线时都会创建一个新的webgl实例.同样，webgl经常需要复杂的变量和资源，因此能够使这些变量保持活动状态很好，这样就不必再次加载它们，甚至在某些情况下甚至可以在路由之外使用它们.

In angular 2 is there a way to keep a navigation route alive even when it isn't navigated to? My purpose for this is I'm attempting to put a webgl canvas into a angular 2 route. Now by default whenever a route is navigated to it initializes the component and loads all of the needed resources then when navigating away it destroys the component and removes the view from the Dom. This causes 2 problems when using webgl the main one being there are only a specific amount of instances of webgl allowed otherwise it could overload the graphics card. So if the route is navigated to and away from multiple times there's a chance that limit can be reached because it's creating a new webgl instance every time the route is navigated to. Also webgl often time requires complex variables and resources and it would be nice to be able to keep those variables alive so they don't have to be loaded again and in some cases even use them outside of the route.

因此，我建议的解决方案是使组件处于活动状态但隐藏，以便资源和变量保持活动状态，是否有任何方法可以做到这一点?

So my proposed solution is to keep the component alive but hidden so that resources and variables are kept alive is there any way to do this?

推荐答案

我认为您可以尝试使用 CanReuse 接口及其 routerCanReuse .如果组件实现此方法并返回true，则该组件将不会被销毁，并且相同的组件实例将在路由之间重用:

I think that you could try to use the CanReuse interface and its routerCanReuse. If the component implements this method and it returns true, the component won't be destroyed and the same component instance will be reused across routes:

@Component({
  selector: 'my-cmp',
  template: `
    (...)
  `
})
class MyCmp implements CanReuse, OnReuse {
  routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
    return true;
  }
}

这篇关于即使未导航到Angular 2，路线也可以保持活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！