Góc 2 tham số tuyến tùy chọn

Question

Có thể có tham số tuyến tùy chọn trong tuyến đường Angular 2 không? Tôi đã thử các cú pháp 1.x góc trong RouteConfig nhưng nhận được bên dưới lỗi:

"ORIGINAL EXCEPTION: Path "/user/:id?" contains "?" which is not allowed in a route config."

@RouteConfig([ 
{ 
    path: '/user/:id?', 
    component: User, 
    as: 'User' 
}]) 

Answer 1

Bạn có thể xác định nhiều tuyến đường có và không có tham số:

@RouteConfig([ 
    { path: '/user/:id', component: User, name: 'User' }, 
    { path: '/user', component: User, name: 'Usernew' } 
]) 

và xử lý các tham số tùy chọn trong thành phần của bạn :

constructor(params: RouteParams) { 
    var paramId = params.get("id"); 

    if (paramId) { 
     ... 
    } 
} 

Xem thêm vấn đề liên quan đến github: https://github.com/angular/angular/issues/3525

Answer 2

Bạn nên sử dụng tham số truy vấn khi thông tin là tùy chọn.

Route Parameters or Query Parameters?

There is no hard-and-fast rule. In general,

prefer a route parameter when

• the value is required.
• the value is necessary to distinguish one route path from another.

prefer a query parameter when

• the value is optional.
• the value is complex and/or multi-variate.

từ https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Bạn chỉ cần đưa ra các tham số từ con đường tuyến đường.

@RouteConfig([ 
{ 
    path: '/user/', 
    component: User, 
    as: 'User' 
}]) 

Answer 3

Với angular4 chúng ta chỉ cần tổ chức các tuyến với nhau trong hệ thống phân cấp

const appRoutes: Routes = [ 
    { path: '', component: MainPageComponent }, 
    { path: 'car/details', component: CarDetailsComponent }, 
    { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
    }, 
    { path: 'car/details/:id', component: CadDetailsComponent }, 
    { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
    } 
]; 

này làm việc cho tôi. Cách này router biết tuyến đường tiếp theo dựa trên các tham số id tùy chọn là gì.

Answer 4

góc 4 - Giải pháp để giải quyết các Trật tự của các tham số tùy chọn:

DO NÀY:

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent}, 
    {path: 'products', component: ProductsComponent}, 
    {path: 'products/:id', component: ProductsComponent} 
] 

Lưu ý rằng products và products/:id tuyến đường được đặt tên giống hệt nhau. Angular 4 sẽ theo dõi một cách chính xác products cho các tuyến đường không có tham số và nếu có thông số, nó sẽ theo sau products/:id.

Tuy nhiên, đường dẫn cho tuyến đường không thông số products phải không có dấu gạch chéo, nếu không góc sẽ xử lý không chính xác nó như một đường dẫn tham số. Vì vậy, trong trường hợp của tôi, tôi đã có dấu gạch chéo cho các sản phẩm và nó không hoạt động.

XIN ĐỪNG LÀM THẾ:

... 
{path: 'products/', component: ProductsComponent}, 
{path: 'products/:id', component: ProductsComponent}, 
... 

Answer 5

Ran vào một thể hiện của vấn đề này, và trong việc tìm kiếm một giải pháp cho nó đến đây. Vấn đề của tôi là tôi đã làm những đứa trẻ, và lười biếng tải các thành phần cũng như để tối ưu hóa mọi thứ một chút. Trong ngắn hạn nếu bạn đang lười tải mô-đun phụ huynh. Điều chính là sử dụng '/: id' của tôi trong tuyến đường, và nó khiếu nại về '/' là một phần của nó. Không phải là vấn đề chính xác ở đây, nhưng nó được áp dụng.

App-định tuyến từ mẹ

... 
const routes: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: 'pathOne', 
     loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule' 
     }, 
     { 
     path: 'pathTwo', 
     loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule' 
     }, 
... 

tuyến Child lười biếng nạp

... 
const routes: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: '', 
     component: OverviewComponent 
     }, 
     { 
     path: ':id', 
     component: DetailedComponent 
     }, 
    ] 
    } 
]; 
... 

Answer 6

{path: 'users', redirectTo: 'users/'}, 
{path: 'users/:userId', component: UserComponent} 

Bằng cách này, thành phần không rerendered khi tham số được thêm vào.