角度導航和驗證 - 帶參數的路線

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

我有一些事情我不知道該怎么做

1. 在我編輯工廠后（示例網址：“factories/3/factor/edit”），我想導航回“工廠”網址。

我嘗試了以下方法：

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});

所有導致重定向到主頁/組件（網址：“”）

我無法使用硬路徑 (this.router.navigate(['factories']);) 進行導航，因為我有另一個可以編輯工廠的路徑，我也想返回到父路徑（從'details/:index/factory/edit' 返回到 'details')

2. 我想驗證“索引”參數 - 檢查我是否有一個與數字匹配的工廠，並驗證它是一個數字。 如果驗證失敗，則重定向到“工廠”/“詳細信息”路徑。

我試圖通過警衛做到這一點，但是當用戶刷新頁面時，我的工廠數據正在重置（我使用 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' ]);
   }

}