Angular 2: Umleiten Route mit Parametern und optionalen Parametern

Question

I eine Route zu einem anderen Weg umgeleitet werden soll:

/foo/bar/123 schould zu/bar/123 umleiten; mode = Test

I konfigurierte die Route auf folgende Weise:

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

Wenn es Umleitung, die ;mode=test Teil in der Ziel-uRL fehlt. Wie kann ich das einbeziehen?

Answer 1

Der eckige Router betrachtet grundsätzlich Pfadobjekte und erstellt die Grundrouten Ihrer App (ohne die optionalen Parameter). welche dann verwendet werden würden, um Routen zu erkennen, wenn sie genau dem Pfad entsprechen. Die optionalen Parameter können daher nicht in ihnen verwendet werden, da sie "optional" sind. und die einzige Möglichkeit, irgendwelche Routenparameter in diese Pfadobjekte einzuschließen, bindet sie innerhalb der URL mit der Syntax ": etwas", die dann nicht optional wäre. Ich glaube, Sie einige andere Möglichkeiten haben diese Notwendigkeit Ihrer abzudecken:

Ihre „mode“ Parameter auf Ihre grundlegende Route hinzufügen: { path:'/bar/:id/:mode', component: BarComponent } und Ihren Umleitungspfad

zu { path: 'foo/bar/:id', redirectTo: '/bar/:id/test' } ändern: Sie den Pfad so definieren

unter Verwendung eines Proxy-Komponente: Änderung der Umleitungs-Pfad zu: { path: 'foo/bar/:id', component: BarProxyComponent } und definieren, die Komponente wie folgt aus:

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

mit einem canActivate Guard: Sie können auch einen Wachdienst für Ihren 'foo' Pfad erstellen, und ihn innerhalb des Schutzes auf die gewünschte Route umleiten. Es ist jedoch nicht die wahre Absicht hinter diesen Wachen und sie nutzt sie nur für dieses Problem. Sie können den Umleitungspfad zu { path: 'foo/bar/:id', component: UnusedFooComponent, canActivate: [FooGuard]} ändern und die Wache wie folgt definieren:

@Injectable() 
export class FooGuard implements CanActivate { 

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

nicht auch die FooGuard bei einer Modulebene zu schaffen, vergessen. und beachten Sie, dass Sie hier immer an einen anderen Ort umleiten (und false zurückgeben) in der Wache, bevor die UnusedFooComponent erstellt wird ...