Angular2 路由：持久化路由选项卡和子路由答案

【问题标题】：Angular2 Routing: persisting route tabs and child routesAngular2 路由：持久化路由选项卡和子路由
【发布时间】：2016-04-27 19:38:16
【问题描述】：

Angular 社区！

我目前正在将 AngularJS 应用程序重写为 Angular 2。我想解决可以描述为：路由选项卡 + 子路由的问题。

所以，基本上 Angular 2 中的路由器会破坏非活动组件（我的选项卡！）。问题是我不想要这种行为。原因是我有一些像图表和数据网格这样的组件，想在它们之间快速切换，我不想重新创建它们。

我找到了一些解决方法，可以在有路由的同时保留我的标签，但使用这种方法我不知道如何实现子路由 .我还想有一个与深度无关的解决方案（意思是：更深入地工作），因为我有更多的子选项卡需要持久化。

解决方法是：我在路由中放置了一些空组件，并自己实例化选项卡，并使用[hidden] 属性隐藏它们：

app.ts:

@Component({ /*...*/ })
@RouteConfig([
    {path: '/**', redirectTo: ['Dashboard']},

    {path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
    {path: '/products/...', name: 'Products', component: EmptyRoute},
    {path: '/sales', name: 'Sales', component: EmptyRoute},
    {path: '/reports', name: 'Reports', component: EmptyRoute},
])
export class App {
    constructor(private router: Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}

app.html:

<dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard>
<products-management [hidden]="!isRouteActive(['/Products'])"></products-management>
<sales [hidden]="!isRouteActive(['/Sales'])"></sales>
<reports [hidden]="!isRouteActive(['/Reports'])"></reports>

【问题讨论】：

如果有人对部分解决方案感兴趣：github.com/angular/angular/issues/6634
我自己也遇到过这个问题，在这里找到了我自己的问题的答案：stackoverflow.com/a/36100138/2972
@MartinHN 你测试过参数化层次结构吗？我的测试 plnkr：plnkr.co/edit/MMy3azc4ksQOH6ezZIG5?p=preview - 单击产品 1，然后单击产品 2，然后单击产品 1，底部的文本丢失。找不到解决方案，但路由器绝对不应该管理组件的生命周期。 CanReuse 并没有像我们预期的那样工作。它只是在相同类型的组件之间进行比较，可能在相同的路由级别。我已经浪费了一些时间来调试 Angular 2，我相信路由器需要重新设计——自定义 Outlet 不会这样做——或者在某些层次结构不起作用的情况下
嗨@Namek -- 我知道这有点老了 -- 你有关于使用 RC5 的最佳方法的更新吗？
我可以补充一点，我在没有路由的情况下解决了我的问题，我在这里描述了它namekdev.net/2017/05/angular-2-my-solution-for-dynamic-tabs

标签： angular angular2-routing

【解决方案1】：

我了解到您有两个不同的问题：

1- 如何防止组件在离开时被破坏。 2- 实现子路由。

1) 目前 Angular 没有方便的方法来做到这一点。如果它们是一个名为 canDestroy() 的生命周期钩子，我们将不胜感激。

无论如何，您都可以使用不可路由的选项卡或将数据存储在不会被破坏的更高组件上。

2) 对于子路线，我只举两个例子：

Ex1：常规子路由

const AdminRoutes: Routes = [
{
  path: '',
  component: AdminComponent,
  children: [
    {
      path: 'users',
      component: UsersComponent,
      children: [
        { path: 'acces',  component: AccesComponent, data: { preload: true} },
        { path: 'roles',  component: RolesComponent, data: { preload: true} },
        { path: '',   redirectTo: '/admin/users/acces', pathMatch: 'full' },
        { path: '**', redirectTo: '/admin/users/acces', pathMatch: 'full' },
      ],
      data: { preload: true}
    },
    { path: '',   redirectTo: '/login', pathMatch: 'full' },
    { path: '**', redirectTo: '/login', pathMatch: 'full' }
  ]
},

EX2：当子路由属于另一个模块时

高级模块代码

    const appRoutes: Routes = [
  { path: 'login',  component: LoginComponent, data: { preload: true} },
  {
    path: 'admin',
    loadChildren: 'app/modules/admin/admin.module#AdminModule',
    canActivate: [AuthGuardService],
    data: { preload: true}
  },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: '**', redirectTo: '/login', pathMatch: 'full' }

子路由在他们自己的模块中的代码

const AdminRoutes: Routes = [
{
  path: '',
  component: AdminComponent,
  children: [
    {
      path: 'users',
      component: UsersComponent,
      children: [
        { path: 'acces',  component: AccesComponent, data: { preload: true} },
        { path: 'roles',  component: RolesComponent, data: { preload: true} },
        { path: '',   redirectTo: '/admin/users/acces', pathMatch: 'full' },
        { path: '**', redirectTo: '/admin/users/acces', pathMatch: 'full' },
      ],
      data: { preload: true}
    },
    { path: '',   redirectTo: '/login', pathMatch: 'full' },
    { path: '**', redirectTo: '/login', pathMatch: 'full' }
  ]
},

【讨论】：