具有延迟加载和深层模块结构的Angular 2路由器重用策略

Question

我是angular的新手，我正在尝试实现以下路由器重用策略以及延迟加载：

import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldDetach', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return future.routeConfig === curr.routeConfig;
    }

}

而且，在我的项目中，我有一个深层模块结构。我创建了一个plunker，它说明了我的项目的基本结构以及我正在尝试做的事情，但它根本不起作用。有人能帮帮我吗？

Answer 1

解决了这个问题。看看这个link的答案，完美地为我工作。

我的app-routing.module：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './shared/auth/auth.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: './layout/layout.module#LayoutModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'login', loadChildren: './login/login.module#LoginModule',
    data: { key: 'login', shouldDetach: 'no' }
  },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule', data: { key: 'not-found' } },
  { path: '**', redirectTo: 'not-found' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

我的custom-reuse-strategy.ts：

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
      if (route.data.shouldDetach === 'no') {
        return false;
      }

      return true;
    }

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

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

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

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
      return future.data.key === curr.data.key;
    }

}