Angular 2 Wie man 404 oder einem anderen Pfad umgeleitet werden, wenn der Pfad nicht

Question

existiert Ich habe versucht, 404 / anderen Pfad umgeleitet werden, wenn der Pfad Winkel existiert nicht in 2

Ich habe versucht, Forschung gibt es einige Verfahren für Winkel 1, aber nicht eckig 2.

Hier ist mein Code:

@RouteConfig([ 
{ 
    path: '/news', 
    name: 'HackerList', 
    component: HackerListComponent, 
    useAsDefault: true 
}, 
{ 
    path: '/news/page/:page', 
    name: 'TopStoriesPage', 
    component: HackerListComponent 
}, 
{ 
    path: '/comments/:id', 
    name: 'CommentPage', 
    component: HackerCommentComponent 
} 
]) 

So Beispiel, wenn ich /news/page/ dann funktioniert es umleiten und es mir eine leere Seite zurückkehren, wie Sie diese Art von Fall passieren Sie behandeln?

Answer 1

können Sie {path: '/*path', redirectTo: ['redirectPathName']}

wie verwenden:

{path: '/home/...', name: 'Home', component: HomeComponent} 
{path: '/', redirectTo: ['Home']}, 
{path: '/user/...', name: 'User', component: UserComponent}, 
{path: '/404', name: 'NotFound', component: NotFoundComponent}, 

{path: '/*path', redirectTo: ['NotFound']} 

, wenn kein Weg zu NotFound Pfad umleiten Spiele dann

für v2.2.2 aktualisiert

In Routing der Version v2.2.2 Name pro Es gibt keine mehr. Route definieren ohne Name Eigentum. so sollten Sie Pfad statt NameredirectTo: '/redirectPath' und keine führende slash für Pfad verwenden, so path: '404' anstelle von path: '/404'

wie:

{path: '404', component: NotFoundComponent}, 
{path: '**', redirectTo: '/404'} 

Answer 2

Machen Sie Ihre Standard-Route Ihre 404 oder Seite mit einem Controller, der eine harte JavaScript-Umleitung tut.

Answer 3

Wie shaishab roy sagt, in dem Spickzettel Sie kann die Antwort finden.

Aber in seiner Antwort, die gegebene Antwort war:

{path: '/home/...', name: 'Home', component: HomeComponent} 
{path: '/', redirectTo: ['Home']}, 
{path: '/user/...', name: 'User', component: UserComponent}, 
{path: '/404', name: 'NotFound', component: NotFoundComponent}, 

{path: '/*path', redirectTo: ['NotFound']} 

Aus irgendwelchen Gründen ist es nicht funktioniert auf meiner Seite des Fall ist, so habe ich versucht, statt:

{path: '/**', redirectTo: ['NotFound']} 

und es funktioniert. Seien Sie vorsichtig und vergessen Sie nicht, dass Sie es am Ende setzen müssen, sonst haben Sie oft die 404 Fehlerseite;).

Answer 4

Als Angular mit der Veröffentlichung fortfuhr, sah ich mich dem gleichen Problem gegenüber. Wie pro Version 2.1.0 die Route Schnittstelle wie folgt aussieht:

export interface Route { 
    path?: string; 
    pathMatch?: string; 
    component?: Type<any>; 
    redirectTo?: string; 
    outlet?: string; 
    canActivate?: any[]; 
    canActivateChild?: any[]; 
    canDeactivate?: any[]; 
    canLoad?: any[]; 
    data?: Data; 
    resolve?: ResolveData; 
    children?: Route[]; 
    loadChildren?: LoadChildren; 
} 

Also meine Lösungen war die folgende:

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: '404', component: NotFoundComponent }, 
    { path: '**', redirectTo: '404' } 
]; 

Answer 5

Meine bevorzugte Option auf 2.0.0 und bis eine erstellen 404 Route und erlauben auch eine ** Route Pfad auf die gleiche Komponente zu lösen.Dadurch können Sie mehr Informationen über die ungültige Route protokollieren und anzeigen als eine einfache Umleitung, die den Fehler verbergen kann.

Einfache 404 Beispiel:

{ path '/', component: HomeComponent }, 
// All your other routes should come first  
{ path: '404', component: NotFoundComponent }, 
{ path: '**', component: NotFoundComponent } 

Zur Anzeige der falschen Informationen Route in Import hinzuzufügen innerhalb NotFoundComponent zu Router:

import { Router } from '@angular/router';

Fügen Sie es zu dem constructior von NotFoundComponent:

constructor(public router: Router) { }

Dann können Sie es von Ihrem HTML-Template aus referenzieren, z.

The page <span style="font-style: italic">{{router.url}}</span> was not found.