在angular2中，您如何导航到需要id的另一条路线？

Question

在angular2中，你如何导航到需要id的另一条路线？

我使用此路由器版本：＆＃34; @ angular / router＆＃34;：＆＃34; 2.0.0-rc.1＆＃34;

这是我要导航到的app.component路线：

{ path: '/blog/:slug', component: BlogArticle, as: 'BlogArticle' }

这是我试图导航到它的其他组件：

this.router.navigate(['blog', { slug: blogId }]); 

基本上我想知道如何导航到组件和视图中带有id的url。

视图中的当前尝试：

[routerLink]=" ['/blog', {slug: blogId }]"

该组件的当前尝试：

this.router.navigate（[＆＃39; blog＆＃39;，{slug：blogId}]）;

上述两次尝试均无效，我收到以下错误：

错误：未捕获（承诺）：无法匹配任何路线。

奇怪，因为我在app.component中设置了我的路线链接：

@Routes([
{ path: '/blog/:slug', component: BlogArticle, as: 'BlogArticle' }
])

Answer 1

有这条路线：

{ path: '/blog/:slug', component: BlogArticle }

您可以使用以下内容从视图导航到您的博客：

[routerLink]="['/blog', blogId]"

或者您可以从组件导航到它：

this.router.navigate(['/blog', blogId]);

既然如此，您必须决定 blogId 是否是您博客路线的可选部分，或者实际上是必需的。如果需要，那么上面的代码是可行的方法，但如果它是可选的，可能会或可能不会一直存在，那么我建议将您的路线更改为以下内容：

{ path: '/blog', component: BlogArticle }

然后，如果您想使用 blogId 导航到您的博客，那么您可以这样做：

[routerLink]="['/blog', { blogId: id }]"