Эквивалент Angular 1 в противном случае маршрут в Angular 2

Я использую Angular 2 маршрутизацию для своего приложения, и она работает очень хорошо, но я понятия не имею, как определить маршрут "в противном случае". Таким образом, маршрут будет отображаться, если нет, если текущий URL-адрес не соответствует любому "поддерживаемому" маршруту.

Вот пример моей текущей конфигурации:

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

Ответы

Ответ 1

В angular 2 пока нет пути "иначе". Но такую же функциональность можно достичь с помощью подстановочного параметра, например:

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

Это будет загружать только компонент "NotFound", и URL-адрес будет таким же, как и вы. Если вы хотите, чтобы все не соответствующие маршруты перенаправлялись на URL-адрес "404", вы можете сделать что-то вроде:

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

Ответ 2

В настоящее время это не реализовано в angular 2. Лучшим текущим решением является использование такого решения, как @Gary.

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

как показано в разделе маршрутизации angular (https://angular.io/docs/ts/latest/guide/router.html).

Ответ 3

Попробуйте это вместо другого. Он работает для меня, не уверен, но кажется, что работа продолжается.

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

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

Ответ 4

Это сработало для меня:

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

Ответ 5

Попробуйте это

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

useHash параметр предназначен для использования хэш-стиля https://angular.io/docs/ts/latest/guide/router.html#!#route-config