这个问题通常出现在路由导航时,当 URL 中包含特殊字符时。解决方法是使用 Angular 的 UrlEncodePipe 对 URL 进行编码。
在 HTML 模板中,将路由链接写为:
...
在路由定义中,使用 pathMatch: 'full' 来确保完全匹配:
{ path: 'my-route/:id', component: MyRouteComponent, pathMatch: 'full' },
最后,在应用的 AppModule 中提供 UrlEncodePipe:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { UrlEncodePipe } from './url-encode.pipe';
@NgModule({
imports: [BrowserModule],
declarations: [UrlEncodePipe],
providers: [
{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
{ provide: UrlEncodePipe, useClass: UrlEncodePipe },
],
bootstrap: [AppComponent]
})
export class AppModule { }
使用 UrlEncodePipe 对 URL 进行编码后,特殊字符会被转换成它们的 UTF-8 编码,并且可以匹配路由。