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-支链/寄存器伙伴分支。

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

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

例如，如果我访问： /合伙变量/合作伙伴 - 分支机构/注册伴侣支行“ 然后我将子路径更改为： /合伙变量/合作伙伴 - 分支机构/注册伴侣支行“ 然后我将父路由更改为： /合伙变量/合作伙伴 - 商店类别“ 最后再回到： /合伙变量/合作伙伴 - 分支机构“，默认情况下（路由配置）它会将我重定向到： /合伙变量/合作伙伴 - 分支机构/注册伴侣支行“ 但我在'/ partners-variables / partners-branches'父路线中最后一次访问的路线是'... / registered-partners-branches'子路线，我想恢复它。

Angular 5是否提供了内置功能？我可以手动创建它来订阅路由更改事件并将我最后访问过的子路由存储在内存中，但在此之前我想知道这是否可以在Angular内部实现。

我不是试图将我的整个组件保留在内存中，没有任何linke 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时导航到上次访问的子路线

1 个答案: