Angular命名路由出口URL结构修改：移除括号冒号格式

Hey，我之前刚好解决过一模一样的问题！Angular默认给命名路由出口生成的带括号和冒号的URL确实有点不够美观，要改成你想要的/domain/subPath/popup这种清爽的结构，核心就是自定义一个路由URL序列化器，来重写Angular默认的URL解析和生成逻辑。下面给你一步步拆解实现步骤：

1. 创建自定义URL序列化器类 #

先新建一个custom-url-serializer.ts文件，这个类会负责双向转换URL格式——把Angular内部的命名路由格式转换成我们想要的路径，同时也能把用户输入的干净路径解析回Angular能识别的格式：

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

export class CustomUrlSerializer implements UrlSerializer {
  private defaultSerializer = new DefaultUrlSerializer();

  // 解析进来的URL：把/popup转换成Angular能识别的命名路由格式
  parse(url: string): UrlTree {
    if (url.includes('/popup')) {
      // 替换成Angular默认的命名路由格式
      const modifiedUrl = url.replace('/popup', '/(popup:myopoup)');
      return this.defaultSerializer.parse(modifiedUrl);
    }
    return this.defaultSerializer.parse(url);
  }

  // 序列化出去的URL：把Angular的命名路由格式转换成干净的路径
  serialize(tree: UrlTree): string {
    const defaultUrl = this.defaultSerializer.serialize(tree);
    if (defaultUrl.includes('/(popup:myopoup)')) {
      return defaultUrl.replace('/(popup:myopoup)', '/popup');
    }
    return defaultUrl;
  }
}

2. 在AppModule中替换默认序列化器 #

接下来要告诉Angular使用我们自定义的序列化器，在app.module.ts的providers数组里注册它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UrlSerializer } from '@angular/router';
import { CustomUrlSerializer } from './custom-url-serializer';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    // 替换默认的UrlSerializer为我们自定义的类
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 路由配置保持原有逻辑 #

你的路由配置不需要大改，保持原来的命名路由设置即可，比如在app-routing.module.ts里：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SubPathComponent } from './sub-path/sub-path.component';
import { MyPopupComponent } from './my-popup/my-popup.component';

const routes: Routes = [
  {
    path: 'subPath',
    component: SubPathComponent,
    children: [
      // 命名路由的配置不变
      { path: 'myopoup', component: MyPopupComponent, outlet: 'popup' }
    ]
  }
];

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

关键注意点 #

• 如果你有多个不同的命名路由弹窗，只需要在序列化器的parse和serialize方法里添加对应的替换规则就行，比如判断不同的popup名称来匹配不同的路径
• 导航的时候还是用Angular标准的命名路由方式，比如：

  this.router.navigate(['/subPath', { outlets: { popup: 'myopoup' } }]);
  

  序列化器会自动把生成的URL转换成/subPath/popup
• 刷新页面也完全没问题，自定义序列化器会把/subPath/popup解析回Angular能识别的内部格式，弹窗功能不受影响

这样改完之后，你的URL就会变成想要的干净结构，同时完全保留命名路由出口的弹窗功能！

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