Question

假设我们有两条路线Dashboard和Profile。 Dashboard具有动态标签功能，例如Google spreadsheet。我想在Dashboard中创建一些选项卡（构建图表，可视化一些数据）。现在，如果我路由到Profile然后路由回Dashboard，我想查看之前Dashboard中这些标签中的内容。这意味着，我想在客户端保持状态。 AFAIK在组件之间进行路由时，会重新创建组件。是否可以在使用角度2路由时制作类似应用程序的电子表格？我需要使用路由，因为在我的应用程序中我必须使用LazyLoading功能。

那么这个想法应该是什么？我是角度2的新手。

Answer 1

当只有路线参数在停留在同一路线时发生变化时，目前仅重新使用组件。

如果路线发生变化，新路线添加相同组件时的事件将重新创建组件。

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

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

<强>更新

Angular2增加了对自定义重用策略的支持。

另见

Answer 2

由于@GünterZöchbauer提供的示例，根据我的理解，我决定提取一个最小的示例。

See it in action

摘要：

首先，我实现了RouteReuseStrategy：

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

    calcKey(route: ActivatedRouteSnapshot) {
        let next = route;
        let url = '';
        while(next) {
            if (next.url) {
                url = next.url.join('/');
            }
            next = next.firstChild;
        }
        return url;
    }

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this.handlers[this.calcKey(route)] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.routeConfig && !!this.handlers[this.calcKey(route)];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        if (!route.routeConfig) { return null; }
        return this.handlers[this.calcKey(route)];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return this.calcKey(curr) === this.calcKey(future);
    }
}

在我的AppModule中，我添加了一个新的提供程序并配置了一些路由：

export const ROUTES: Routes = [
  {
    path: 'one',
    component: OneComponent
  },
  {
    path: 'two',
    component: TwoComponent
  },
];

@NgModule({
  ...
  imports: [... RouterModule.forRoot(ROUTES)...]
  providers: [...{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }...],
  ...
})
export class AppModule { }

最后，我定义了一些组件，如下所示：

@Component({
  selector: 'my-app',
  template: `
    <a [routerLink]="['/one']" >Route One</a><br>
    <a [routerLink]="['/two']" >Route Two</a><br>
    <router-outlet></router-outlet>
  `
})
export class AppComponent  {}

@Component({
  selector: 'app-one',
  template: `
  Route One currently showing<br>
  <input type="text" placeholder="enter some text">
  `,
})
export class OneComponent {}

@Component({
  selector: 'app-two',
  template: `
  Route Two currently showing<br>
  <input type="text" placeholder="enter some text">
  `,
})
export class TwoComponent {}

想要在Angular 2中路由时阻止组件重新创建

2 个答案: