angular 2 Route zu 404 Seite wenn Route Param ungültig ist

Question

Angenommen, ich habe eine Route mit einem solchen Parameter (in Angular 2): /user1/products/:id, der untergeordnete Routen wie /user1/products/3/reviews haben könnte.

Wenn ich zu /user1/products/-1 navigiere, überprüfe ich mit meinem Server und wenn das Produkt nicht existiert, möchte ich eine 404 Seite rendern, ohne den Browserverlauf zu beeinflussen.

Mit router.navigate(['/404']) oder router.navigateByUrl('/404') scheint nicht zu funktionieren, weil es sowohl fügt /user1/products/-1 und /404 in den Browser-History.

Bedeutung, wenn ich die Zurück Taste im Browser drücken, gehe ich zu /user1/products/-1 zurück, die sofort zu /404 umgeleitet wird, und ich bin im Wesentlichen auf /404 stecken.

In ExpressJS würden wir etwas wie next() tun, um die Anfrage an unseren 404-Handler zu übergeben. Gibt es in Angular 2 ein clientseitiges Äquivalent?

Answer 1

aktualisieren

Im neuen Router V3 können Sie Wachen verwenden, wie in https://angular.io/guide/router#canactivate-requiring-authentication erklärt

Original-

ich glaube, Sie @CanActivate() verwenden sollten, um die Prüfung zu tun. Wenn Sie nach vorn in @CanActivate() die ungültigen URL nicht zu der Geschichte hinzugefügt werden soll (nicht versucht)

Siehe auch https://github.com/angular/angular/issues/4112, wie DI verwendet in @CanActivate()

Answer 2

Es ist wirklich interessante Frage, vielleicht sollten Sie es als Feature melden anfordern. Ich wäre nett, Zugriff auf Router-Anweisung innerhalb loader Rückruf von RouteDefinition haben.

Sie könnten versuchen, die Validierung zu emulieren, indem Sie die Standardroute /** hinzufügen und den Parameter regex von RouteDefinition verwenden, um nur positive Zahlen zu finden.

Answer 3

Ok, das ist bereits implementiert, nur nicht gut dokumentiert.

Nach der Dokumentation:
router.navigateByUrl(url: string, _skipLocationChange?: boolean) : Promise<any>

hat einen Parameter _skipLocationChange, die die Geschichte nicht ändern wird.
Diese werden den Trick:

router.navigateByUrl('/404', true); router.navigateByInstruction(router.generate(['/404']), true);

Answer 4

Ab Angular 2 endgültig das ist die Lösung:

this._router.navigateByUrl('/404', { skipLocationChange: true })