Question

我在角度布线时遇到问题。在我的应用中，我有一些这样的路线：

[{
     path: 'myroutes/:id',
     component: BarComponent
 }, {
     path: 'myroutes/:id/:value',
     component: FooComponent
 }]

我想更改此路由，但是必须将旧路由重定向到新路由。所以我这样修改了代码：

[{
    path: 'myroutes/:id/:value',
    redirectTo: 'myroute/:id/:value'
}, {
    path: 'myroutes/:id',
    component: BarComponent
}, {
    path: 'myroute/:id/:value',
    component: FooComponent
}]

通过此路由，我收到了NavigationError：

无法重定向到'/ myroute /：id /：value'。找不到'：id'。

更改代码以在redirectTo路由中使用固定参数可以解决该错误，但是参数必须是动态的。

使用RouterModule.forRoot()导入路由。

希望这是足够的信息，否则请随时要求更多。 ;）

感谢您的帮助！：）

Answer 1

更改redirectTo的路径。您应在其前面加上/

[{
    path: 'myroutes/:id/:value',
    redirectTo: '/myroute/:id/:value'
}, {
    path: 'myroutes/:id',
    component: BarComponent
}, {
    path: 'myroute/:id/:value',
    component: FooComponent
}]

Answer 2

如果没有其他作用，则可以创建一个简单的Guard来重定向您的旧路由。

我认为类似的方法应该起作用：

app-routing.module.ts：

[{
  path: 'myroutes/:id/:value',
  canActivate: [
    forwarderGuard
  ]
}, {
  path: 'myroutes/:id',
  component: BarComponent
}, {
  path: 'myroute/:id/:value',
  component: FooComponent
}]

forwarder.guard.ts：

@Injectable()
export class forwarderGuard implements CanActivate {

  constructor(
    private router: Router
  ) { }

  canActivate(route: ActivatedRouteSnapshot) {
    this.router.navigate([`myroute/${route.params['id']}/${route.params['value']}`]);
    return false;
  }
}

Answer 3

我已经解决了我的问题。问题是我的应用程序中的参数名称写为camelCase。以小写形式写入参数后，一切都将变好。：）

感谢您的帮助！

带参数的角路由redirectTo

3 个答案: