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

Question

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

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

score 15 · Accepted Answer

目前，只有在保持相同路由的情况下，只有路由参数发生变化时，才会重用组件。

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

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

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

更新

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

也可以看看

score 2 · Accepted Answer

感谢@Günter Zöchbauer 提供的示例，出于我自己的理解，我决定提炼一个最小的示例。

看到它在行动

总之：

首先我实现了一个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 - 想要在 Angular 2 中路由时防止组件重新创建

2 回答 2

Related

Reference