时间戳

首页 > 解决方案 > 如何使用带有命名路由器出口和 url 参数的 Router.navigate()

angular - 如何使用带有命名路由器出口和 url 参数的 Router.navigate()

问题描述

我在使用命名路由器插座时遇到了麻烦，我认为我用错了，尽管我假设我遵循了 angular 文档：

路由器配置：

const routes: Routes = [

    {path: 'checktypes', component: ChecktypeComponent},
    {path: 'checktypes/:id', component: ChecktypeDetailsComponent, outlet: 'checktypeDetails'},

  ];

模板ChecktypeComponent：

...
<router-outlet name="checktypeDetails"></router-outlet>
...

在ChecktypeComponent（在路线上/checktypes）：

this.router.navigate([{outlets: {checktypeDetails: ['checktypes', 1]}}]);

为了简单起见，我对 id 1 进行了硬编码。我总是得到错误Cannot match any routes. URL Segment: 'checktypes/1'。我尝试了很多东西，但我无法让它工作。我究竟做错了什么？

标签： angularangular-routing

解决方案

您可以使用如下

对于像这样的路线

{
 path: 'update-book/:book-id',
 component: BookUpdateComponent,
 outlet: 'bookPopup' 
}

您可以导航为

this.router.navigate([{ outlets: { bookPopup: [ 'update-book', book.id ] }}]);

这样你就可以将参数传递给 URL 并且 URL 变成了

http://localhost:4200/book(bookList:book-detail//bookPopup:add-book)

推荐阅读