Angular 2 router.navigate

Question

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

以下是路径是路径最后一部分的示例路线：

#!/bin/sh
sudo rails runner "Model.print_something"

试图像这样使用数组进行链接：

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

我没有收到任何错误，而且根据我的理解，这应该有效。

Angular 2文档（目前）以下为例：

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

谁能看到我哪里出错了？我在路由器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() 是我们将在按钮点击时触发的方法

Home