我正在try 导航到Angular 2中的一条路由,其中混合了路由和查询参数.

下面是一个示例路由,其中路由是路径的最后一部分:

{ path: ':foo/:bar/:baz/page', component: AComponent }

try 使用数组进行链接,如下所示:

this.router.navigate(['foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)

我没有收到任何错误,根据我的理解,这应该可以工作.

Angular 2文档(目前)有以下示例:

{ path: 'hero/:id', component: HeroDetailComponent }

['/hero', hero.id] // { 15 }

有人能看出我哪里错了吗?我在3号路由.

推荐答案

如果第一段不是以/开头,则为相对路由.router.navigate需要relativeTo参数进行相对导航

您可以将路由设为绝对路由:

this.router.navigate(['/foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)

否则你就会超过relativeTo

this.router.navigate(['../foo-content', 'bar-contents', 'baz-content', 'page'], {queryParams: this.params.queryParams, relativeTo: this.currentActivatedRoute})

另见

Angular相关问答推荐

PrimeNG侧栏清除primeNG消息.为什么?

在不使用散列(#)路由的情况下刷新Angular 8的SPA时,删除404错误

Angular 17+独立配置中main.ts bootstrap 调用的最佳实践

Angular 路由中的模块构建失败

在指令中获取宿主组件的templateRef

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

Angular AuthGuard:不推荐使用 CanActivate 和 CanActivateChild.如何更换它们?

您如何链接需要多个先前可观察对象的依赖订阅

如何使用 Angular 12 material 验证密码和确认密码?

关闭 Dynamsoft Web Twain 弹出窗口

如何修复 [Object: null prototype] { title: 'product' }

使用 rxjs 处理刷新令牌

Angular 5 响应式表单 - 单选按钮组

Angular @NGRX中这三个点的含义是什么

Angular:找不到不同的支持对象[object Object]

Angular 4 错误:没有 HttpClient 的provider提供者

Lint 错误:实现生命周期挂钩接口

Angular 应用程序必须在新部署后清除缓存

此类通过 SomeModule -> SomeComponent 对消费者可见,但不会从顶级库入口点导出

如何在 Angular 中使用带有 SASS 的 Bootstrap 4