Angular - Router Config - redirectTo mit Parameter/Variable Segment

Question

In der Beispiel-Routing-Konfiguration unten erhalte ich einen Fehler: Kann nicht auf '/ IP /: ID' umleiten. Kann ': ID' nicht finden, wenn localhost: 8080 \ sso \ ip \ 1 eingegeben wird. Ich versuche zu verstehen, wie man variable Segmente des Pfades umleitet. In diesem Fall: ID scheint nicht gefunden zu werden. Ich referenzierte https://vsavkin.com/angular-router-understanding-redirects-2826177761fc, die einen ähnlichen Anwendungsfall beschreibt, bei dem ein dynamisches Segment innerhalb einer redirectTo-Eigenschaft verwendet wird.

Wird die ID mit dem Parameter: id von der initiierten/sso/ip/: id Route aufgelöst? Eine ähnliche Frage wurde gestellt, aber niemals beantwortet: https://groups.google.com/forum/#!topic/angular/Mw0N3qYphO8.

Jede Hilfe wird sehr geschätzt?

Answer 1

Mein Ansatz wäre, Umleitung manuell zu behandeln, wenn ich die Routen-Konfiguration nicht zum Funktionieren bringen kann. Habe eine RedirectService mit einer redirectInFlight() Methode, die auf die Router.events Observable hört. Wenn der Router auf einen Zielpfad zu gehen versucht, wie /sso/ip/:id, transparent auf dem richtigen Weg umleiten: /ip/:id

Ich würde den Dienst zu AppModule.providers fügen Sie dann, spritzen den Dienst in AppComponent und redirectInFlight()

AppComponent nennen

@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)); 
    } 
} 

Schließlich können Sie den gesamten sso Pfad und seine untergeordneten Pfade von Ihrer Router-Konfiguration entfernen und es sehr vereinfachen.

Live demo

Hinweis: Diese Implementierung ist ein Ausgangspunkt. Sie können es robuster machen, indem Sie eine Karte von Umleitungen speichern und darauf verweisen, anstatt "/ sso" zu codieren.