Tương đương với Góc 1 nếu không đường trong Angular 2

Question

Tôi đang sử dụng định tuyến Angular 2 cho ứng dụng của mình và nó hoạt động khá tốt nhưng tôi không biết làm thế nào để định nghĩa tuyến đường "khác". Vì vậy, một tuyến đường sẽ được hiển thị nếu không có nếu URL hiện tại không tương ứng với bất kỳ tuyến đường "được hỗ trợ" nào.

Dưới đây là một ví dụ về cấu hình hiện tại của tôi:

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

Answer 1

Không có 'khác' tuyến đường trong góc 2 được nêu ra. Nhưng có thể đạt được cùng một chức năng bằng cách sử dụng thông số ký tự đại diện, như vậy:

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

Điều này sẽ chỉ tải thành phần 'NotFound' và url sẽ giống như những gì bạn điều hướng đến. Trong trường hợp bạn muốn tất cả các tuyến đường không phù hợp để chuyển hướng đến url '404', bạn có thể làm điều gì đó như:

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

Answer 2

Hãy thử thay thế bằng cách khác. Nó làm việc cho tôi, không chắc chắn nhưng có vẻ như công việc đang diễn ra.

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

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

Answer 3

này chưa hiện được triển khai ở góc 2. Các giải pháp tốt nhất hiện nay là sử dụng một giải pháp như @Gary cho thấy.

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

như trong phần hướng dẫn định tuyến góc (https://angular.io/docs/ts/latest/guide/router.html).

Answer 4

Hãy thử tham số useHash

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

này là dành cho sử dụng băm kiểu url https://angular.io/docs/ts/latest/guide/router.html#!#route-config

Answer 5

này đã làm việc cho tôi:

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