问题描述:在Angular路由中使用斜杠(/)时,会自动转义为%2F。
解决方法: 在Angular路由的配置文件中,可以使用encodeURIComponent()方法将斜杠(/)转义为%2F。
示例代码:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about/:param', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
about.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
param: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.param = params['param'];
});
}
}
about.component.html
Param: {{ param }}
在上述示例代码中,路由配置文件app-routing.module.ts中的about路由使用了参数:param。当在浏览器地址栏中输入/about/test时,Angular会将/test作为参数传递给about组件,并显示在about.component.html中。
如果参数中包含斜杠(/),例如/about/test/path,Angular会将斜杠转义为%2F,即/about/test%2Fpath。在about组件中,可以使用decodeURIComponent()方法将%2F转义回斜杠。
about.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
param: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.param = decodeURIComponent(params['param']);
});
}
}
这样,当在浏览器地址栏中输入/about/test%2Fpath时,Angular会将/test%2Fpath作为参数传递给about组件,并显示在about.component.html中的param变量中,此时param的值为test/path。