Угловой 2 необязательный параметр маршрута

Question

Возможно ли иметь необязательный параметр маршрута в маршруте Угловой 2? Я попытался Угловой синтаксис 1.x в RouteConfig но получил под ошибкой:

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

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

Answer 1

Вы можете определить несколько маршрутов и без параметра:

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

и обрабатывать необязательный параметр в компоненте :

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

    if (paramId) { 
     ... 
    } 
} 

Смотри также проблема, связанная GitHub: https://github.com/angular/angular/issues/3525

Answer 2

Рекомендуется использовать параметр запроса, когда информация является необязательной.

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.

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

Вам просто нужно вынуть параметр из пути маршрута.

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

Answer 3

С angular4 нам просто нужно организовать маршруты вместе в иерархии

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

Это работает для меня. Таким образом, маршрутизатор знает, какой следующий маршрут основан на параметрах идентификатора параметра.

Answer 4

Угловая 4 - Решение для решения упорядоченности необязательного параметра:

это сделать:

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

Обратите внимание, что products и products/:id маршрутов по имени точно такой же. Угловой 4 будет правильно следовать за products для маршрутов без параметров, а если параметр будет следовать за products/:id.

Однако путь для непараметрического маршрута products должен не иметь конечную косую черту, в противном случае угловое будет обрабатывать ее как путь к параметру. Так что в моем случае у меня была сводная черта для продуктов, и она не работала.

НЕ ДЕЛАТЬ ЭТО:

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

Answer 5

Столкнулся другой экземпляр этой проблемы, и в поисках решения, чтобы он пришел сюда. Моя проблема заключалась в том, что я делал детей, и ленивая загрузка компонентов, а также для оптимизации вещей. Короче, если вы ленивы загружаете родительский модуль. Главное, чтобы я использовал «/: id» на маршруте, и это жалобы на «/», являющиеся его частью. Не точная проблема здесь, но она применяется.

App-маршрутизации от родительского

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

маршруты по уходу за детьми ленивым загружены

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

Answer 6

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

Таким образом, компонент не rerendered, когда добавляется параметр.