Angular2 Routing:保留路线选项卡和子路线

本文介绍了Angular2 Routing:保留路线选项卡和子路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Angular社区！

Angular Community!

我目前正在将AngularJS应用重写为Angular2.我想解决的问题可以描述为:路由选项卡+子路由.

I'm currently rewriting AngularJS app to Angular 2. I want to solve problem which could be described as: route tabs + child routes.

因此，基本上，Angular 2中的Router会破坏不活动的组件(我的标签！).问题是我不希望这种行为.原因是我有一些组件，例如图表和数据网格，并且想要在它们之间快速切换，所以我不想重新创建它们.

So, basically Router in Angular 2 destroys inactive components (my tabs!). The problem is I don't want this behaviour. Reason is I have some components like charts and data grid and want to switch between them fast, I don't want to recreate them.

我发现了一些解决方法，可以在拥有路线时保留我的标签，但是使用这种方法，我不知道如何实施子路线 .我还想有一个与深度无关的解决方案(意思是:更深入地研究工作)，因为我需要保留更多子选项卡.

I have found some workaround to persist my tabs while having routes but using this approach I don't know how to implement child routes. I'd like to also have a solution depth-independent (meaning: working more levels deeper) because I have more subtabs that need to be persisted.

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

The workaround is: I have put some empty component to routes and instantiate tabs myself hiding them with [hidden] property:

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>

推荐答案

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

I understand you have two different questions:

1-离开组件时如何防止组件损坏.2-实施子路线.

1- How to prevent the destruction of the component when you leave it.2- implementing child routes.

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

1) For now Angular doesn't have convenient way to do this. We would apreciate it if they were a life cycle hook called like canDestroy().

无论如何，您都可以使用不可路由的选项卡来完成此操作，或者仅将数据存储在不会被破坏的高级组件中.

Anyway you can do this either using non routable tabs OR just store your data on a higher component that doesn't get destroyed.

2)对于子路由，我将仅举两个示例:

2) For the child routes I'll just put 2 examples:

Ex1:常规子级路由

Ex1: regular child routing

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:当子路由属于另一个模块时

EX2: When the child routes belongs to another module

上级模块的代码

    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' }

子路由在其各自模块中的代码

Code for child routes in their own module

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' }
  ]
},

这篇关于Angular2 Routing:保留路线选项卡和子路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Some