如何在Angular主路由变更后自动关闭辅助路由或隐藏其URL路径？

方案一：监听路由事件，主路由切换时自动关闭侧边栏 #

通过监听Angular路由导航事件，在每次主路由切换开始时，检查当前路由快照中是否存在侧边栏辅助路由，若存在则自动清除该路由，同时保持URL不更新。

在根组件（如app.component.ts）中添加以下代码：

import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationStart)
  ).subscribe((event: NavigationStart) => {
    const currentRouteSnapshot = this.router.routerState.snapshot.root;
    // 检查是否存在名为'sidebar'的辅助路由出口
    const hasSidebarOutlet = currentRouteSnapshot.children.some(child => child.outlet === 'sidebar');
    
    if (hasSidebarOutlet) {
      // 清除侧边栏辅助路由，同时跳过URL变更、保留查询参数和片段
      this.router.navigate(
        [{ outlets: { sidebar: null } }],
        {
          relativeTo: currentRouteSnapshot,
          skipLocationChange: true,
          preserveQueryParams: true,
          preserveFragment: true
        }
      );
    }
  });
}

关键说明： #

• 监听NavigationStart事件确保在路由切换开始时就执行清除操作
• skipLocationChange: true保证URL不会被修改
• preserveQueryParams和preserveFragment确保主路由的查询参数和锚点片段不会丢失
• 仅当侧边栏路由存在时才执行导航，避免触发无限循环

方案二：自定义URL序列化器，永久隐藏辅助路由路径 #

通过自定义Angular的UrlSerializer，重写URL序列化逻辑，让辅助路由的路径永远不会出现在URL中。

步骤1：创建自定义序列化器 #

新建hidden-aux-url-serializer.ts文件：

import { DefaultUrlSerializer, UrlTree, UrlSegmentGroup, PRIMARY_OUTLET } from '@angular/router';

export class HiddenAuxUrlSerializer extends DefaultUrlSerializer {
  // 保留默认的URL解析逻辑
  parse(url: string): UrlTree {
    return super.parse(url);
  }

  // 重写序列化逻辑，只保留主路由部分
  serialize(tree: UrlTree): string {
    // 获取主路由的段组
    const mainRouteGroup = tree.root.children[PRIMARY_OUTLET];
    if (!mainRouteGroup) return '';

    // 序列化主路由路径
    let urlPath = this.serializeSegmentGroup(mainRouteGroup);

    // 添加查询参数（如果有）
    if (Object.keys(tree.queryParams).length > 0) {
      const queryString = Object.entries(tree.queryParams)
        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
        .join('&');
      urlPath += `?${queryString}`;
    }

    // 添加锚点片段（如果有）
    if (tree.fragment) {
      urlPath += `#${encodeURIComponent(tree.fragment)}`;
    }

    return urlPath;
  }

  // 递归序列化路由段组
  private serializeSegmentGroup(group: UrlSegmentGroup): string {
    let path = group.segments.map(seg => encodeURIComponent(seg.path)).join('/');
    
    // 序列化子路由
    if (group.children[PRIMARY_OUTLET]) {
      const childPath = this.serializeSegmentGroup(group.children[PRIMARY_OUTLET]);
      if (childPath) path += `/${childPath}`;
    }

    return path;
  }
}

步骤2：在模块中注册自定义序列化器 #

在app.module.ts的providers数组中替换默认的UrlSerializer：

import { NgModule } from '@angular/core';
import { UrlSerializer } from '@angular/router';
import { HiddenAuxUrlSerializer } from './hidden-aux-url-serializer';

@NgModule({
  // ...其他模块配置
  providers: [
    { provide: UrlSerializer, useClass: HiddenAuxUrlSerializer }
  ]
})
export class AppModule { }

关键说明： #

• 该序列化器仅处理主路由（PRIMARY_OUTLET）的路径，完全忽略所有辅助路由出口
• 保留了查询参数和锚点片段的处理，不影响主路由的正常功能
• 如果只需隐藏特定辅助路由（如仅sidebar），可修改serialize方法，仅移除指定出口的路由信息

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