web-dev-qa-db-ja.com

Angular 2：パラメータとオプションのパラメータでルートをリダイレクト

ルートを別のルートにリダイレクトしたい：

/ foo/bar/123は/ bar/123; mode = testにリダイレクトする必要があります

次の方法でルートを構成しました。

{ path: 'foo/bar/:id', redirectTo: '/bar/:id;mode=test' },

リダイレクト中は、;mode=test部分がターゲットURLにありません。これを含めるにはどうすればよいですか？

angularangular-routing
8
Johni

angularルーターは、基本的にパスオブジェクトを見て、アプリの基本的なルートのセットを作成します（オプションのパラメーターなし）。その後、パスと完全に一致する場合にルートを認識するために使用されますオプションのパラメーターは「オプション」であるため、それらの内部で使用することはできません。また、これらのパスオブジェクトにルートパラメーターを含める唯一の方法は、オプションではない「：something」構文でURL内にバインドすることです。このニーズをカバーする方法は他にもあると思います。

「モード」パラメーターを基本ルートに追加：このようなパスを定義できます：{ path:'/bar/:id/:mode', component: BarComponent }とリダイレクトパスを{ path: 'foo/bar/:id', redirectTo: '/bar/:id/test' }に変更できます

プロキシコンポーネントを使用：リダイレクトパスを{ path: 'foo/bar/:id', component: BarProxyComponent }に変更し、次のようにそのコンポーネントを定義します。

export class BarProxyComponent {
   constructor(private _router: Router, private _route: ActivatedRoute){
      _router.navigate(['/bar/'+_route.snapshot.params['id'],{mode: 'test'}]);
   }   
}

canActivate Guardを使用：「foo」パスのガードサービスを作成し、ガード内で目的のルートにリダイレクトすることもできます。しかし、それはこれらのガードの背後にある正確な意図ではなく、単にその問題に対してそれらを利用しているだけです。リダイレクトパスを{ path: 'foo/bar/:id', component: UnusedFooComponent, canActivate: [FooGuard]}に変更し、次のようにガードを定義できます。

@Injectable()
export class FooGuard implements CanActivate {

constructor(private _router: Router){}
   canActivate(route: ActivatedRouteSnapshot) {
      this._router.navigate(['/bar/'+route.params['id'],{mode: 'test'}]);
      return false;
   }
}

また、モジュールレベルでFooGuardを提供することを忘れないでください。ここでは、UnusedFooComponentが作成される前に、常にガード内の別の場所にリダイレクトする（そしてfalseを返す）ことに注意してください...

5
GHB