Angular 2 router.navigate

Question

我正在尝试使用路由和查询参数的组合导航到 Angular 2 中的路由。

这是一个示例路线，其中路线是路径的最后一部分：

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

尝试使用数组进行链接，如下所示：

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 上。

Answer 1

如果第一段不以/开头，则为相对路线。 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})

另见

• https://github.com/angular/angular.io/blob/c61d8195f3b63c3e03bf2a3c12ef2596796c741d/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts#L108
• https://github.com/angular/angular/issues/9476

Answer 2

 import { ActivatedRoute } from '@angular/router'; export class ClassName { private router = ActivatedRoute; constructor(r: ActivatedRoute) { this.router =r; } onSuccess() { this.router.navigate(['/user_invitation'], {queryParams: {email: loginEmail, code: userCode}}); } } Get this values: --------------- ngOnInit() { this.route .queryParams .subscribe(params => { let code = params['code']; let userEmail = params['email']; }); }

参考： https : //angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html

Answer 3

一样简单

从“@angular/router”导入{路由器}；

构造函数（私有路由器：路由器）{}

return(){this.router.navigate(['/','input']);}

在这里，您将重定向到路由输入。 如果您希望相对于某些路径转到特定路径。

return(){this.router.navigate(['/relative','input']);}

这里的 return() 是我们将在按钮点击时触发的方法

<按钮（点击）=返回（）>首页