Angular 2 router.navigate答案

【问题标题】：Angular 2 router.navigateAngular 2 router.navigate
【发布时间】：2016-11-03 00:46:42
【问题描述】：

我正在尝试使用路由和查询参数混合导航到 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 上。

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案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})

另见

【讨论】：

知道这个线程很旧 - 但有几个简单的问题供我理解： 1. 在上面的第二种情况下，它不应该是this.router.navigate(**['foo**-content', 'bar-contents',....（在第一段的开头没有 /，因为它是相对的） 2. 除了 this.currentActivatedRoute，relativeTo 的其他可能值是什么？
如果你希望它是相对的，那么省略前导/，我不是故意的。您希望路径相对于的任何路线。
谢谢 - 但在您的回复中您提到如果第一段以 / 开头，则它是绝对导航。那么为什么需要 relativeTo 呢？
现在我明白你的意思了。 relativeTo 仅对相对路径有意义。感谢您指出这一点。

【解决方案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

【讨论】：

【解决方案3】：

就这么简单

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

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

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

在这里，您将重定向到路由输入。如果你想去相对于某个路径的特定路径，那么。

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

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

【讨论】：