Równoważna z Angular 1 poza tym w Angular 2

Question

Używam routingu Angular 2 dla mojej aplikacji i działa całkiem dobrze, ale nie mam pojęcia, jak zdefiniować trasę "w przeciwnym razie". Tak więc trasa, która będzie wyświetlana, jeśli nie ma, jeśli bieżący URL nie odpowiada żadnej "obsługiwanej" trasy.

Oto przykład z mojej obecnej konfiguracji:

@RouteConfig([ 
    { path: '/', name: 'Home', component: StoryComponent, useAsDefault: true }, 
    { path: '/story', name: 'Story', component: StoryComponent }, 
    { path: '/subscription', name: 'Subscription', component: SubscriptionComponent} 
]) 

Answer 1

Nie ma „inaczej” trasa w kątowym 2 jeszcze. Ale samą funkcjonalność można uzyskać stosując wieloznaczny parametru tak:

@RouteConfig([ 
    { path: '/', redirectTo: ['Home'] }, 
    { path: '/home', name: 'Home', component: HomeComponent }, 
    // all other routes and finally at the last add 
    {path: '/*path', component: NotFound} 

To będzie ładować tylko komponent „NOTFOUND” i url będą takie same jak to, co nawigacja. W przypadku, gdy chcesz wszystko nie pasujące do przekierowania połączeń do „404” url, można zrobić coś takiego:

//at the end of the route definitions 
{ path: '/404', name: '404', component: PageNotFoundComponent }, 
{ path: '/*path', redirectTo:['404'] }` 

Answer 2

Spróbuj zamiast inaczej. Działa to dla mnie, nie jestem pewien, ale wydaje się, że trwają prace.

@RouteConfig([ 
    { path: '/**', redirectTo: ['MycmpnameCmp'] }, 
    ... 
    } 
]) 

https://github.com/angular/angular/issues/4055

Answer 3

To nie ma obecnie realizowany w kątowej 2. najlepszą aktualną rozwiązaniem jest zastosowanie rozwiązania jak @Gary pokazał.

{ path: '**', component: PageNotFoundComponent }

jak pokazano na kątowej części prowadnicy (https://angular.io/docs/ts/latest/guide/router.html).

Answer 4

Spróbuj

RouterModule.forRoot([ 
    { path: 'login', component: LoginComponent }, 
    { path: 'edit-event', component: EventComponent }, 
    { path: 'participants', component: ParticipantsComponent }, 
    { path: 'notification', component: NotificationComponent }, 
    { path: '', component: WelcomeComponent }, //default 
    { path: '**', component: WelcomeComponent } //page not found route 
], { useHash: true }) 

parametr useHash jest za pomocą skrótu url styl https://angular.io/docs/ts/latest/guide/router.html#!#route-config

Answer 5

Ten pracował dla mnie:

const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    // all other routes 
    { path: '**', redirectTo: '/home' } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { }