javascript - Angular 2 Hur man omdirigerar till 404 eller annan väg om vägen inte finns

Jag försökte omdirigera 404 / till en annan väg om vägen inte finns i Angular 2

Jag försökte forska, det finns en metod för Angular 1 men inte Angular 2.

Här är min kod:

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

Så till exempel, om jag omdirigerar till /news/page/ då fungerar det och det returnerar en tom sida till mig, hur hanterar du att detta slags fall händer?

Svar #1

För version v2.2.2 och nyare

I version v2.2.2 och uppåt existerar inte längre egenskapen name och den bör inte användas för att definiera rutten. path bör användas istället för name och ingen inledande snedstreck behövs i vägen. I detta fall använd path: '404' istället för path: '/404':

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

För versioner äldre än v2.2.2

du kan använda {path: '/*path', redirectTo: ['redirectPathName']}:

{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']}

om ingen väg matchar, omdirigera då till NotFound-vägen

Svar #2

Mitt föredragna alternativ på 2.0.0 och uppåt är att skapa en 404-rutt och också tillåta en ** ruttväg att lösas till samma komponent. Detta gör att du kan logga och visa mer information om den ogiltiga rutten snarare än en enkel omdirigering som kan dölja felet.

Enkel 404-exempel:

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

För att visa felaktig ruttinformation, lägg till import till router inom NotFoundComponent:

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

Lägg till det i konstruktorn för NotFoundComponent:

constructor(public router: Router) { }

Då är du redo att referera till det från din HTML-mall, t.ex.

Sidan <span style="font-style: italic">{{router.url}}</span> kunde inte hittas.

Svar #3

När Angular gick vidare med releasen, stötte jag på samma problem. Enligt version 2.1.0 ser Route-gränssnittet ut så här:

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

Så mina lösningar var följande:

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

Svar #4

Som Shaishab Roy säger, i fusklappen kan du hitta svaret.

Men i sitt svar var det givna svaret:

{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']}

Av vissa skäl fungerar det inte på min sida, så jag försökte istället:

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

och det fungerar. Var försiktig och glöm inte att du behöver sätta det i slutet, annars kommer du ofta få 404-felsidan ;).

Relaterade artiklar