Angular4+深度状态重定向实现：是否有对应类库支持？

嘿，刚好我对这块比较熟悉，来给你梳理下完全符合你需求的方案！你想要的「父状态记住最后激活子状态、返回父状态时自动重定向」的功能，有两种靠谱的实现方式：

方案一：UI-Router for Angular（最贴合需求，推荐） #

既然你熟悉ui-router/dsr的功能，那直接用UI-Router的Angular版本就对了——这个深度状态重定向（DSR）是它的原生特性，配置方式和你习惯的几乎一模一样：

1. 先安装对应的包：

   npm install @uirouter/angular
   

2. 在状态定义里给父状态加上dsr配置就行，举个实际例子：

   import { UIRouterModule, StateDeclaration } from '@uirouter/angular';
   
   // 定义两个子状态
   const childStates: StateDeclaration[] = [
     {
       name: 'parent.child1',
       url: '/child1',
       component: Child1Component
     },
     {
       name: 'parent.child2',
       url: '/child2',
       component: Child2Component
     }
   ];
   
   // 父状态启用DSR
   const parentState: StateDeclaration = {
     name: 'parent',
     url: '/parent',
     component: ParentComponent,
     // 开启深度状态重定向，自动记住最后激活的子状态
     dsr: true
   };
   
   // 在模块中注册所有状态
   @NgModule({
     imports: [UIRouterModule.forRoot({ states: [parentState, ...childStates] })]
   })
   export class AppModule {}
   

配置完成后，用户访问/parent时，就会自动跳转到最后一次打开的parent.child1或parent.child2，完全实现你要的效果。

方案二：原生Angular Router手动实现 #

如果不想引入第三方路由库，也可以基于Angular原生Router自己造轮子，核心逻辑就是监听路由变化、记录子状态、父路由加载时重定向：

• 第一步：先做个状态存储服务，用来记录每个父路由对应的最后子路由：

  import { Injectable } from '@angular/core';
   import { Router, NavigationEnd } from '@angular/router';
   import { filter } from 'rxjs/operators';
  
   @Injectable({ providedIn: 'root' })
   export class DsrService {
     // 用Map存储父路由名和对应的最后子路由URL
     private lastChildRoutes = new Map<string, string>();
  
     constructor(private router: Router) {
       // 监听路由导航完成事件，记录子路由
       this.router.events.pipe(
         filter(event => event instanceof NavigationEnd)
       ).subscribe((event: NavigationEnd) => {
         const urlSegments = event.urlAfterRedirects.split('/');
         // 这里假设父路由的路径是'parent'，你可以根据自己的路由结构调整判断逻辑
         if (urlSegments.includes('parent') && urlSegments.length > 2) {
           this.lastChildRoutes.set('parent', event.urlAfterRedirects);
         }
       });
     }
  
     // 获取指定父路由的最后子路由
     getLastChildRoute(parentRouteKey: string): string | null {
       return this.lastChildRoutes.get(parentRouteKey) || null;
     }
   }
  

• 第二步：在父路由对应的组件里，初始化时检查并跳转：

  import { Component, OnInit } from '@angular/core';
   import { Router } from '@angular/router';
   import { DsrService } from './dsr.service';
  
   @Component({
     selector: 'app-parent',
     templateUrl: './parent.component.html'
   })
   export class ParentComponent implements OnInit {
     constructor(private router: Router, private dsrService: DsrService) {}
  
     ngOnInit(): void {
       const lastChild = this.dsrService.getLastChildRoute('parent');
       if (lastChild) {
         this.router.navigateByUrl(lastChild);
       }
     }
   }
  

这种方式需要自己处理路由匹配的细节，胜在不用依赖第三方库，适合坚持用原生Router的场景。

内容的提问来源于stack exchange，提问作者Suresh Nagar