Angular2单参数路由不起作用

Question

我的简单路由不起作用，我不知道为什么...... 下面的命令报告加载 PageNotFoundComponent 而不是 OffertDetailComponent

app.routing

copy

路线命令

{
    path: "OffertDetail/:idOffert",
    component: OffertDetailComponent
},
{
    path: '**',
    component: PageNotFoundComponent
}

如果我删除＆＃34; / idOffert＆＃34;从ap.Routing和命令中的参数，组件正确加载。

感谢支持

Answer 1

我相信你正在混合查询参数和路由参数。尝试将router.navigate更改为以下内容，同时将路径保持为"OffertDetail/:idOffert"：

this.router.navigate(['OffertDetail', '1073']);

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

设置查询参数：

// Set our navigation extras object
// that contains our global query params and fragment
let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

使用路线参数：

this.router.navigate(['/hero', hero.id]);

参数从路由器配置中获取:param的名称。

传递两个路由参数假设我们路径配置中的路径是path: "OffertDetail/:idOffert/detail/:someId"，我们可以将参数传递给它：

this.router.navigate(['/OffertDetail', someParameter, 'detail', someOtherValue]);