输入父路径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-branchs/register-partners-branch' 然后将子路线更改为: '/partners-variables/partners-branchs/registered-partners-branchs' 然后将父路线更改为: '/partners-variables/partners-stores-categories' 最后再次回到: '/partners-variables/partners-branchs'， 默认情况下(路由配置)，它会将我重定向到: '/partners-variables/partners-branchs/register-partners-branch' 但我上次在"/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，并手动路由到该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屋！