如何解决具有解析查询参数的Angular Route无法解析
在Angular 10应用程序中,我有一条这样的路线
http://localhost:4200/employee/enrollments%3Fnumber%3D189930097%26city=Chicago
有时URL被编码为
export const enrollmentManagementRoutes: Routes = [
{
path: 'enrollments',component: EnrollmentSearchComponent,canActivate: [EmployeeAuthGuardService],}
];
@NgModule(
{
imports: [
RouterModule.forChild(enrollmentManagementRoutes)
],exports: [
RouterModule
]
})
export class EmployeeRoutingModule
{
}
,并且路由器找不到匹配项。有没有办法解决此解码问题并使其始终解决?
更新: 我添加了页脚组件,其中正在使用routerLink来更新当前URL
EmployeeRoutingModule :
import {Component,OnInit} from '@angular/core';
import {NavigationEnd,Router} from '@angular/router';
import {environment} from '../../../environments/environment';
@Component({
selector: 'app-footer',templateUrl: './footer.component.html',styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit
{
appVersion: any;
currentUrl='/';
constructor(private router: Router)
{
}
ngOnInit()
{
this.appVersion = environment.VERSION;
//Update Need Assistance link URL,this prevents default URL being '/'
this.router.events.subscribe(data=>
{
if(data instanceof NavigationEnd)
{
this.currentUrl=data.url+'';
}
});
}
navigateByUrl()
{
this.router.navigateByUrl(this.currentUrl);
}
}
FooterComponent
<a class=" col-sm-12 col-xs-12 col-md-auto request-help-link" id="request-help-link" rel="noopener noreferrer"
[routerLink]="currentUrl" style="font-size: 20px" >
Need Assistance? Click here
</a>
页脚HTML:
p{
/* your current style */
margin:auto;
}
解决方法
使用route参数比查询字符串有意义吗?
export const enrollmentManagementRoutes: Routes = [
{
path: 'enrollments:number',component: EnrollmentSearchComponent,canActivate: [EmployeeAuthGuardService],}
];
,然后路由到http://localhost:4200/employee/enrollments/189930097
在组件中,您可以使用ActivatedRoute服务获取参数。
https://angular.io/api/router/ActivatedRoute
,您是否尝试过使用自定义序列化程序?
serializer.ts
export class CustomUrlSerializer implements UrlSerializer {
parse(url: any): UrlTree {
const dus = new DefaultUrlSerializer();
return dus.parse(url);
}
serialize(tree: UrlTree): any {
const dus = new DefaultUrlSerializer();
const path = dus.serialize(tree);
// use your regex to replace as per your requirement.
path.replace(/%3F/g,'?');
path.replace(/%3D/g,'=');
return path;
}
}
然后在App模块中
...
providers: [
{provide: UrlSerializer,useClass: CustomUrlSerializer}
],...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。