如何将 Router.navigate() 与命名路由器出口和 url 参数一起使用

Question

我在使用命名路由器出口时遇到麻烦，我认为我使用错误，尽管我假设我遵循了角度文档：

路由器配置：

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'。我尝试了很多东西，但我无法让它发挥作用。我究竟做错了什么？

Answer 1

您可以使用如下

对于像这样的路线

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

您可以导航为

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

生成的 URL 将具有以下结构：

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