1

在我的项目中，我有一些接受参数的路线。

我的几条路线（兄弟姐妹）：

{
  path: '', component: HomeComponent, 
},
{
  path: 'factories', component: FactoriesComponent, canActivate: [AuthGuard], 
  resolve: [FactoriesResolverService],
  children: [
    {
      path: ':index/factory', component: DetailsFactoryComponent, canActivate: [DetailsFactoryGuard]
    },
    {
      path: ':index/factory/edit', component: EditFactoryComponent, canActivate: [DetailsFactoryGuard]
    }
  ]  
},

我有几件事我不知道该怎么做

  1. 在我编辑工厂（例如 url：'factories/3/factor/edit'）后，我想导航回 'factories' url。

我尝试了以下方法：

private router: Router
private route: ActivatedRoute

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

所有导致重定向到主页/组件（url：“”）

我无法使用硬路径 (this.router.navigate(['factories']);) 导航，因为我有另一个能够编辑工厂的路径，并且我还想返回到父路径（从'details/:index/factory/edit' 返回到'details'）

  1. 我想验证“索引”参数 - 检查我是否有一个与数字匹配的工厂，并验证它是否是一个数字。如果验证失败重定向到“工厂”/“详细信息”路径。

我试图通过守卫来做到这一点，但是当用户刷新页面时，我的工厂数据正在重置（我使用 NgRX 状态来保存数据）。我尝试使用解析器，但解析器仅在警卫之后调用，我无法从警卫导航，或者我最终陷入无限循环

任何想法如何实施？

========================

编辑

关于第一个问题，我找到了解决方案：

const currUrl = this.route.snapshot['_routerState'].url.substring(1).split("/"); this.router.navigate([currUrl[0]]);

currUrl 将有一个包含完整 url 的数组 - 数组的第一个值是父路径

还在想第二个问题

4

1 回答 1

0

您可以将索引保存为类中的属性并通过该属性导航

export class Component implements OnInit {
   index: string | number;

   ngOnInit() {
     this.index = this.route.snapshot.params['index'];
   }


   onNavigate() {
      this.router.navigate(['/', this.index,'factory' ]);
   }

}
于 2020-01-13T22:52:14.653 回答