角度 - ルータの設定 - パラメータ/変数セグメントを使用したリダイレクト

Question

以下のルーティング設定例では、エラー：「/ ip /：id」にリダイレクトできません。 localhost：8080 \ sso \ ip \ 1を入力すると '：id'が見つかりません。私はパスの可変セグメントを使用してリダイレクトする方法を理解しようとしています。この場合、idは見つからないようです。私はhttps://vsavkin.com/angular-router-understanding-redirects-2826177761fcを参照しています。これは、動的セグメントがredirectToプロパティ内で使用される同様の使用例を示しています。

開始された/ sso/ip/：idの：idパラメータを使用して、idが解決されるかどうかを確認します。同様の質問がありましたが、回答したことはありません：https://groups.google.com/forum/#!topic/angular/Mw0N3qYphO8。

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

const appRoutes: Routes = [ 
    { 
     path: 'ip', 
     children: [ 
     { 
      path: ':id', 
      children: [ 
      { 
       path: 'tcv', 
       component: IpTcvComponent   
      }, 
      { 
       path: '', 
       component: IpComponent   
      } 
      ] 
     }, 
     { 
      path: '', 
      component: IpHomeComponent   
     } 
     ] 
    }, 
    { 
    path: 'sso', 
    children: [ 
     { 
     path: 'ip', 
     children: [ 
      { 
      path: ':id', 
      children: [ 
       { 
       path: 'tcv', 
       pathMatch: 'full', 
       redirectTo: '/ip/:id/tcv' 
       }, 
       { 
       path: '', 
       pathMatch: 'full', 
       redirectTo: '/ip/:id' 
       } 
      ] 
      }, 
      { 
      path: '', 
      pathMatch: 'full', 
      redirectTo: '/ip' 
      } 
     ] 
     } 
    ] 
    } 
]; 

Answer 1

私のアプローチは、ルート設定を機能させることができない場合、リダイレクトを手動で処理することです。 にはredirectInFlight()の方法があり、これは観測可能なものとしてRouter.eventsを待ち受けます。ルータは透過的に正しい道にリダイレクトする、など/sso/ip/:idなどターゲットパスに移動しようとすると：/ip/:id

私はその後、AppModule.providersにサービスを追加AppComponentにサービスを注入し、redirectInFlight()

AppComponentを呼ぶだろう

@Component({ 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent implements OnInit { 

    //inject the RedirectService 
    constructor(private redirectSvc:RedirectService){} 

    //start listening to the router and redirecting 
    ngOnInit() {this.redirectSvc.redirectInFlight();} 
} 

RedirectService

import {Injectable} from '@angular/core'; 
import {Router} from '@angular/router'; 
import 'rxjs/Rx'; //replace with just the classes you need from RxJS library 

@Injectable() 
export class RedirectService { 
    events$:Observable<any>; //stream of Router events 

    constructor(private router:Router) { 
     this.events$ = 
      //listen to router events and inspect the `url` string property 
      //and filter for urls that begin with /sso 
      this.router.events.filter(e=> e.url && e.url.startsWith('/sso')) 
    } 

    redirectInFlight(){ 
     //First remove /sso from the start of url to fix it 
     this.events$.map(e => e.url.replace('/sso','')) 
      //navigate to the fixed URL 
      .subscribe(newUrl=>this.router.navigateByUrl(newUrl)); 
    } 
} 

最後に、ルータ設定からssoパスとその子パス全体を削除することができます。

Live demo

注：この実装は、出発点です。 "/ sso"をハードコーディングする代わりに、リダイレクトのマップを格納して参照することで、より堅牢にすることができます。