进入父路由时导航到上次访问的子路由 Angular 5

Question

在我的 Angular 5 应用程序中，我的路由器配置如下：

{
        path: 'system-variables',
        component: SystemVariablesComponent,
        children: [
          {
            path: '',
            redirectTo: 'partners-variables',
            pathMatch: 'full'
          },
          {
            path: 'partners-variables',
            component: PartnersVariablesComponent,
            children: [
              {
                path: '',
                redirectTo: 'partners-branches',
                pathMatch: 'full'
              },
              {
                path: 'partners-branches',
                component: PartnersBranchesComponent,
                children: [
                  {
                    path: '',
                    redirectTo: 'register-partners-branches',
                    pathMatch: 'full'
                  },
                  {
                    path: 'register-partners-branches',
                    component: RegisterPartnersBranchesComponent
                  },
                  {
                    path: 'registered-partners-branches',
                    component: RegisteredPartnersBranchesComponent
                  }
                ]
              },
              {
                path: 'partners-stores-categories',
                component: PartnersStoresCategoriesComponent,
                children: [
                  {
                    path: '',
                    redirectTo: 'register-partners-stores-categories',
                    pathMatch: 'full'
                  },
                  {
                    path: 'register-partners-stores-categories',
                    component: RegisterPartnersStoresCategoriesComponent
                  },
                  {
                    path: 'registered-partners-stores-categories',
                    component: RegisteredPartnersStoresCategoriesComponent
                  }
                ]
              }
            ]
          }
        ]

如您所见，当我访问“/”时，我被重定向到“/partners-variables”，它重定向到“/partners-variables/partners-branches”，然后是“/partners-variables/partners-branches/register-合作伙伴分支'。

在这组嵌套的子路由中，可以导航到多个不同的路径，这段代码只是我整个应用程序的一部分。

我想做的是在重新访问父组件时加载上次访问的子路由。

例如，如果我访问： '/partners-variables/partners-branches/register-partners-branches' 然后我将子路由更改为： '/partners-variables/partners-branches/registered-partners-branches' 然后我将父路由更改为： '/partners-variables/partners-stores-categories' 最后再次回到： '/partners-variables/partners-branches', 默认情况下（路由配置）它会将我重定向到： '/partners-variables/partners-branches/register-partners-branches' 但是我在“/partners-variables/partners-branches”父路由中最后一次访问的路由是“.../registered-partners-branches”子路由，我想恢复它。

Angular5 是否提供任何内置功能来执行此操作？我可以手动创建它，订阅路由更改事件并将我上次访问的子路由存储在内存中，但在这样做之前我想知道这在 Angular 本身内是否可行。

我并没有试图将我的整个组件都保存在内存中，没有任何链接 routeReuseStrategy，只是为了跟踪我上次访问的所有父路由的子路由。

谢谢！

Answer 1

我不知道路由器配置本身是否可以做到这一点。

但是您可以创建一个服务，在每个路由组件中使用，以存储匹配的路由 url。
然后，在每个父组件的 ngOnInit() 上，调用服务检索最后存储的子组件 url 并手动路由到这个

在 RegisterPartnersBranchesComponent 中：

ngOnInit() {
  this.myservice.storeRoute(this.router.url);
}

在 PartnersBranchesComponent 这样的父组件中：

ngOnInit() {
  // if you have to redirect (or everytime)
  if (this.router.url === '/partners-variables/partners-branches') {
     this.router.navigateByUrl(this.myservice.lastRoute);
  }
}

您可能必须在模块中使用 forRoot() 将服务声明为单例。

进入父路由时导航到上次访问的子路由 Angular 5

Navigate to last visited child route when entering parent route Angular 5

angular-routing

angular

angular-router

angular5