编辑

Question

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

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

{
  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]
    }
  ]  
},

我有些事我不知道该怎么做

我编辑了工厂（示例网址：“ factories / 3 / factor / edit”）后，我想导航回到“ factories”网址。

我尝试了以下操作：

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'）

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

我试图通过防护措施来解决这个问题，但是当用户刷新页面时，我的工厂数据正在重置（我使用NgRX状态保存数据）。我尝试使用解析器，但解析器仅在后卫，我无法从后卫导航，或者我陷入无限循环

有什么想法可以实现吗？

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

编辑

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

const currUrl = this.route.snapshot ['_ routerState']。url.substring（1）.split（“ /”）; this.router.navigate（[currUrl [0]]）;

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

仍然想知道第二个问题

Answer 1

您可以将索引另存为类中的属性，然后按该属性进行导航

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

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


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

}

角度导航和验证-带有参数的路线

编辑

1 个答案: