Angular 2可選路由參數

在Angular 2路由中可以有可選的路由參數嗎？我試過角1.x的語法RouteConfig但低於錯誤接收：Angular 2可選路由參數

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

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

來源

2015-12-10 Jeroen

117

可以定義多種途徑有或沒有參數：

@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

來源

2015-12-21 14:51:03 rerezz

糾正我，如果我錯了，但是這個解決方案只有當數組中的路由順序顛倒了，即具有參數的路由發生在另一個之前時，才適用於我。在我這樣做之前，路由器只匹配沒有參數的路由。 –

@Aviad P當我調用'router.navigate（['/ user'，{id：2}]）;'時，順序並不重要，但當我調用'router.navigate（[''/user'，2]）;'。在後一種情況下，需要在沒有任何參數的路由之前定義帶有ID參數的路由。 – reduckted

此解決方案是否仍適用？我注意到從「用戶」移動到「UserNew」將重新實例化「User」組件 – teleaziz

當信息是可選的時，建議使用查詢參數。

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

來源

2016-02-24 14:39:18

更改可選路由參數重新組件，但更改queryParams不會。此外，如果您在路由導航之前解析某些數據，則每次更改可選路由參數時都會請求它。 – neilhem

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

這對我的作品一起組織路線。這樣路由器根據選項id參數知道下一個路由是什麼。

來源

2017-06-20 05:00:43

角4 - 解決方案，以解決可選參數的順序：

做到這一點：

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

注意，products和products/:id路線的命名完全一樣的。對於沒有參數的路線，Angular 4將正確地遵循products，如果參數將遵循products/:id。

但是，非參數路徑products的路徑必須是而不是有一個結尾斜槓，否則角將錯誤地將其視爲參數路徑。所以在我的情況下，我有產品的尾部斜線，它不起作用。

不要這樣做：

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

來源

2017-08-17 19:34:53 ObjectiveTC

如果兩者都去了ProductsComponent，那麼你如何處理可選參數呢？ – Arwin

您可以在ProductsComponent中訪問：id1，：id2等參數以及請求的url，如下所示：this.route.url.first（） .mergeMap（（url）=> { // console.log '（1：檢測到URL更改）+ url）; return this.route.params.do（（params）=> {console.log（'2：url + params change detected'+ params [「id1」]請注意，你可以傳遞'data'參數，這個參數可以通過參數「data」或「params [」id2「]）; this.id1 = params [」id1「]; this.id2 = params [」id2「] }） – ObjectiveTC

到組件也是如此，對於每個路由甚至對於相同的組件來說都是不同的。例如'{path：'products'，component：ProductsComponent，data：{showAllProducts：true}}，'可以使用，然後檢查'showAllProducts'。稍微好一些，然後檢查一個null，但對於更簡單的情況，可能是好的。 –

就遇到了這個問題的另一個實例，並在尋找一個解決方案，它來到了這裏。我的問題是我正在做孩子，並懶惰地加載組件，以優化一些東西。簡而言之，如果你懶加載父模塊。主要的原因是我在路由中使用'/：id'，並且它是'/'的一部分。這裏沒有確切的問題，但它適用。從父

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

來源

2017-12-07 20:52:13

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

這種方式添加的參數時該組件不重新呈現。

來源

2018-03-07 18:44:49

Angular 2可選路由參數

回答

相關問題