Question

如何在没有字符串连接且指定/questions/123/step1的情况下使用/questions/123/step2在组件中从Router导航到/questions/123/？

我在下面添加了自己的答案。请随时提出更好的答案。 ;-)我想有更好的方法。

Answer 1

在做了一些研究后，我遇到了

this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute});

和

this.router.navigate(['../step2'], {relativeTo: this.activatedRoute});

第一种方法（Router.createUrlTree API）对我不起作用，即什么也没发生。第二种方法（Router.navigate API）有效。

然而，第二种方法使用NavigationExtras（第二个参数），其中记录了@experimental。希望下一个版本再次发生重大变化...... NavigationExtras将保持稳定。

任何其他建议/方法，请不要犹豫，回答我上面的问题。

更新2016-10-12

还有另一个stackoverflow问题：

How do I navigate to a sibling route

更新2016-10-24

文档：

Routing & Navigation (Relative Navigation)

更新2019-03-08

Angular 7.1似乎有变化。在另一篇文章中有一个答案如何使用Angular 7.1解决它。请参阅https://stackoverflow.com/a/38634440/42659。

Answer 2

首先，注入路由器＆amp;构造函数上的ActivatedRoute

constructor(private route:ActivatedRoute,private router:Router) { }

然后使用Click事件：

onEditClick(){
        this.router.navigate(['edit'],{relativeTo:this.route});

您导航到预期的页面。在我的场景中，我想去recipe / 1来编辑配方。 http://localhost:4200/recipes/1/edit

Answer 3

您可以在下面使用，

假设questions已加载到您的主要router-outlet

中

  this.router.navigate([
      '/',
      { 
        outlets: {
          primary: [
              // below may be replaced with different variables
              'questions',
              '123',  
              'step2'
          ]
        }
      }
  ])

希望这会有所帮助!!

Answer 4

注意：路线区分大小写，因此请确保两端的套管匹配

这对Angular 8来说对我有用：
在父组件/页面中，使用打字稿导航到子页面：

this.router.navigate(['subPage'], { relativeTo: this.route });

我父母模块中的路由器如下：

const routes: Routes = [
  {
    path: '',
    component: MyPage,
    children: [
      { path: 'subPage', component: subPageComponent}
    ]
  }
];

在父级的html页面上，使用以下链接进行导航：

<a [routerLink]="'subPage'">Sub Page Link</a>
<router-outlet></router-outlet>

使用Angular 2路由器（版本3）导航相对

4 个答案: