在Angular中,可以通过使用UrlSerializer
和UrlTree
来解决在查询参数之前添加额外斜杠的问题。
首先,创建一个自定义的CustomUrlSerializer
类,继承自DefaultUrlSerializer
。然后重写parse
方法,处理URL中的查询参数之前的斜杠。
import { DefaultUrlSerializer, UrlTree } from '@angular/router';
export class CustomUrlSerializer extends DefaultUrlSerializer {
parse(url: string): UrlTree {
// Remove extra slash before query params
url = url.replace(/\/(\?|\#)/g, '$1');
return super.parse(url);
}
}
接下来,在Angular的根模块中,将CustomUrlSerializer
提供给UrlSerializer
。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, UrlSerializer } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomUrlSerializer } from './custom-url-serializer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([])
],
providers: [
{ provide: UrlSerializer, useClass: CustomUrlSerializer }
],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,在查询参数之前不会再添加额外的斜杠了。
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private router: Router) {}
navigate() {
this.router.navigate(['/example'], { queryParams: { param: 'value' } });
}
}
此时,导航到/example?param=value
时,不会再添加额外的斜杠。