代码之家 › 专栏 › 技术社区 › Felipe Micali

输入父管线角度5时导航到上次访问的子管线

angular-router angular-routing angular5 angular

Felipe Micali · 技术社区 · 7 年前

在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 branchs”,然后再重定向到“/partners variables/partners branchs/register partners branchs”。

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

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

例如,如果我访问: “/合作伙伴变量/合作伙伴分支/注册合作伙伴分支” 然后我将子路径更改为: “/合作伙伴变量/合作伙伴分支机构/注册合作伙伴分支机构” 然后我将父路由更改为: “/合作伙伴变量/合作伙伴存储类别” 最后再回到: “/合作伙伴变量/合作伙伴分支”, 默认情况下(路由配置),它会将我重定向到: “/合作伙伴变量/合作伙伴分支/注册合作伙伴分支” 但我上次访问的“/合作伙伴变量/合作伙伴分支”父路由中的路由是“/注册合作伙伴分支机构的子路由,我想恢复它。

Angular 5是否提供任何内置功能?我可以手动创建它,订阅路由更改事件,并将上次访问的子路由存储在内存中,但在这样做之前,我想知道Angular本身是否有可能做到这一点。

我并没有试图将所有组件都保存在内存中,也没有任何链接路由使用策略,只是为了跟踪我上次访问的所有父路由的子路由。

谢谢

1 回复 | 直到 7 年前

Kapcash 7 年前

我不知道在路由器配置上是否可以实现这一点。

但您可以创建一个在每个路由组件中使用的服务来存储匹配的路由url。
然后,在 ngOnInit() 对于每个父组件,调用服务以检索上次存储的子url并手动路由到此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() 在您的模块中。