Angular路径中使用加号的解决方案：避免加号被转义为%2B

要让Angular在URL路径中直接使用加号（如http://localhost:4200/how+to+do）而不自动转义为%2B，可以通过自定义URL序列化器来实现，以下是具体步骤：

1. 自定义URL序列化器 #

Angular默认的DefaultUrlSerializer会将加号转义为%2B，我们需要重写这个序列化器，修改其序列化逻辑来保留加号：

创建custom-url-serializer.ts文件：

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

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

  // 解析URL时保持默认逻辑，确保能正确处理带加号的输入
  parse(url: string): UrlTree {
    return this.defaultSerializer.parse(url);
  }

  // 序列化URL时，将默认转义后的%2B替换回加号
  serialize(tree: UrlTree): string {
    const serializedUrl = this.defaultSerializer.serialize(tree);
    return serializedUrl.replace(/%2B/g, '+');
  }
}

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

在根模块（如app.module.ts）的providers数组中，用自定义的序列化器替换Angular默认的UrlSerializer：

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: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 路由导航与参数处理 #

配置好自定义序列化器后，无论是通过router.navigate导航还是直接在地址栏输入带加号的URL，Angular都会正确处理：

• 导航示例：使用this.router.navigate(['/', 'how+to+do'])会生成http://localhost:4200/how+to+do
• 路由参数获取：如果路由定义为{ path: ':slug', component: SlugComponent }，在组件中通过this.route.snapshot.paramMap.get('slug')能直接拿到how+to+do

注意事项 #

• 确认后端服务或代理服务器能正确识别URL路径中的加号（部分服务可能会将路径里的加号解析为空格，需提前适配）
• 该方案仅针对URL路径部分的加号，查询参数中的加号仍会遵循默认规则（表示空格），若需修改查询参数的处理逻辑，可在序列化器中进一步调整

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