下面是一个示例解决方案:
首先,在组件中定义一个成员变量来存储重定向的目标字符串:
redirectUrl: string;
在构造函数中注入Router
服务:
constructor(private router: Router) {}
接下来,在需要的地方生成重定向的目标字符串,并将其赋值给redirectUrl
变量。你可以根据你的逻辑来生成字符串:
this.redirectUrl = // 生成重定向的目标字符串的逻辑
最后,在路由配置中,使用redirectTo
属性来动态指定重定向的目标。你可以使用this.redirectUrl
来引用重定向的目标字符串:
{ path: 'old-path', redirectTo: this.redirectUrl }
通过这种方式,当导航到'old-path'时,将根据生成的字符串进行重定向。
完整的组件示例代码如下:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-example',
template: `
Example Component
`
})
export class ExampleComponent {
redirectUrl: string;
constructor(private router: Router) {
// 生成重定向的目标字符串的逻辑
this.redirectUrl = // 生成重定向的目标字符串的逻辑
}
}
完整的路由配置示例代码如下:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example.component';
const routes: Routes = [
{ path: 'example', component: ExampleComponent },
{ path: 'old-path', redirectTo: this.redirectUrl },
{ path: '**', redirectTo: '/example' } // 默认重定向到example组件
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这样,每当导航到'old-path'时,将根据生成的字符串进行重定向。