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

问题描述

我在使用命名路由器插座时遇到了麻烦，我认为我使用它是错误的，尽管我认为我遵循了 angular 文档:

I have troubles using named router outlet, I think I am using it wrong although I assume I followed the angular docs:

路由器配置:

const routes: Routes = [

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

  ];

ChecktypeComponent 的模板:

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

在 ChecktypeComponent 中(在路径 /checktypes 上):

In the ChecktypeComponent (on route /checktypes):

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

为了简单起见，我硬编码了 id 1.我总是收到错误 Cannot match any routes.URL 段:'checktypes/1'.我尝试了很多东西，但我无法让它工作.我做错了什么?

I hardcoded the id 1 just for the sake of simplicity. I always get the error Cannot match any routes. URL Segment: 'checktypes/1'. I tried a lot of stuff but I can't get it to work. What am I doing wrong?

推荐答案

可以如下使用

对于类似路线

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

您可以导航为

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

这样就可以把参数传给URL，URL就变成了

This way you can pass parameters to URL and URL became

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

这篇关于如何将 Router.navigate() 与命名的路由器出口和 url 参数一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！