web-dev-qa-db-ja.com

Angular route redirectTo with params

angularルーティングに問題があります。私のアプリでは、次のようなルートがいくつかありました：

_[{
     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()でインポートされます。

これが十分な情報であることを願って、それ以外の場合はもっと遠慮なく尋ねてください。 ;）

ご協力いただきありがとうございます！ :)

angularangular-router
5
Z3R0

問題は解決しました。問題は、私のアプリのパラメーター名がcamelCaseと書かれていたことでした。パラメータが小文字で書かれている場合、すべて問題ありません。 :)

ご協力いただきありがとうございます！

1
Z3R0

redirectToのパスを変更します。プレフィックスとして/を付ける必要があります

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

他に何も機能しない場合は、古いルートをリダイレクトする単純な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;
  }
}
2
Jeffrey Roosendaal