路由中的可變參數個數

我知道我們可以使用'/:id'在路由器路徑中設置參數。但是，我想創建不確定長度的數組是這樣的：'/:id1/:id2/:id3/...'路由中的可變參數個數

目前我管理的三個參數是這樣的：

const routes: Routes = [ 
    { path: '/:name1', component: MyComponent, canActivate: [ LocalUserGuard ] }, 
    { path: '/:name1/:name2', component: MyComponent, canActivate: [ LocalUserGuard ] }, 
    { path: '/:name1/:name2/:name3', component: MyComponent, canActivate: [ LocalUserGuard ] }

不過，我想將它擴展到任何數量的參數。

來源

2017-06-25 Rohan

你想用這個做什麼？所有這些不同的ID應該在哪裏結束？ – jonrsharpe

每個ID引用一個對象數組，每個對象可以進一步包含一個對象數組（這指的是嵌套的ID）等等....所以我不想導航到這些不同的ID並顯示它的數據使用MyComponent – Rohan

如果你希望它是完全隨意的，你可以使用一個wildcard route：

const routes: Routes = [ 
    { path: '**', component: MyComponent, canActivate: [ LocalUserGuard ] }, 
]

內。然後MyComponent你可以通過ActivatedRoute訪問的URL段：

@Component({...}) 
export class MyComponent { 
    constructor(private route: ActivatedRoute) { 
    route.url.subscribe((segments: UrlSegment[]) => { 
     // do whatever you need to with the segments 
    }); 
    } 
}

查看範例Plunker：http://plnkr.co/edit/9YYMwO?p=preview

來源

2017-06-25 11:41:28 jonrsharpe

其實我有這些組件在另一個路線'查看/'。所以我嘗試'查看/ **'，但它不起作用。它給錯誤：無法匹配任何路線。網址：'view/myname' – Rohan

@Rohan請在您的問題中包含相關背景。你有沒有嘗試過讓'視圖'路線的'子女'的通配符部分？ – jonrsharpe

不，我沒有把它放在孩子的下面。因爲如果我把它作爲'view'的孩子，我將不得不將一個路由器組件放到ViewComponent中，但我不想那樣做。我想在我的AppComponent本身。 – Rohan

您可以使用UrlMatcher以匹配您想要的任何類型的網址。

function tagRoute(url: UrlSegment[]) { 
    if(url[0].path.match('tags-list')) 
    { 
    return ({consumed: url}) 
    }else { 
    return null; 
    } 
} 

const appRoutes: Routes = [ 
{matcher: tagRoute, component: TagComponent }, 
{path:'**', component: HomeComponent} 
];

然後你就可以使用ActivatedRoute內TagComponent如@johnrsharpe上述獲取URL段。

this.activateRoute.url.subscribe((segments: UrlSegment[]) => { 
    segments.shift(); 
    segments.join('/'); 
});

來源

2017-12-23 00:35:53 Pralhad

路由中的可變參數個數

回答

相關問題