进入父路线 Angular 5 时导航到上次访问的子路线 [英] Navigate to last visited child route when entering parent route Angular 5

问题描述

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

In my Angular 5 application I have my router configured as this:

{
        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-分支机构/注册合作伙伴分支机构'.

As you can see, when I access '/' I'm redirected to '/partners-variables', that redirects to '/partners-variables/partners-branches' and then to '/partners-variables/partners-branches/register-partners-branches'.

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

Inside this nested set of child routes it's possible to navigate to multiple different paths, and this code is only a portion of my whole application.

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

What I'm trying to do is to load the last visited child route when a parent component is revisited.

例如，如果我访问:'/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"子路由，我想恢复它.

For example, if I visit: '/partners-variables/partners-branches/register-partners-branches' and then I change the child route to: '/partners-variables/partners-branches/registered-partners-branches' and then I change the parent route to: '/partners-variables/partners-stores-categories' and finally back again to: '/partners-variables/partners-branches', by default (route config) it would redirect me to: '/partners-variables/partners-branches/register-partners-branches' but my last visited route inside the '/partners-variables/partners-branches' parent route was the '.../registered-partners-branches' child route, and I'd like to recover it.

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

Does Angular 5 provide any built in functionality to do it? I could create it manually subscribing to route change events and store my last visited child routes in memory, but before doing it I"d like to know if this is possible within Angular itself.

我不想将我的整个组件保存在内存中，没有链接 routeReuseStrategy，只是为了跟踪所有父路由的上次访问的子路由.

I'm not trying to keep my whole components in memory, nothing linke routeReuseStrategy, just to keep track of my last visited child routes for all parent routes.

谢谢！

推荐答案

我不知道是否可以通过路由器配置本身来实现.

I don't know if it's natively possible to do it with the router configuration.

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

But you could create a service, used in each routed component, to store the matched route url.
Then, on the ngOnInit() of each parent component, call the service to retrieve the last stored child url and manually route to this one.

在 RegisterPartnersBranchesComponent 中:

In RegisterPartnersBranchesComponent:

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

在像 PartnersBranchesComponent 这样的父组件中:

In the parent components like PartnersBranchesComponent:

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

您可能需要在模块中使用 forRoot() 将服务声明为单例.

You'll maybe have to declare the service as a singleton with forRoot() in your module.

这篇关于进入父路线 Angular 5 时导航到上次访问的子路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！