Angular2 Маршрутизация: постоянные вкладки маршрута и дочерние маршруты

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>

Ответы

Ответ 1

Я понимаю, у вас есть два разных вопроса:

1- Как предотвратить разрушение компонента, когда вы его покидаете. 2- реализация дочерних маршрутов.

1) На данный момент Angular не имеет удобного способа сделать это. Мы бы оценили его, если они были крючком жизненного цикла, называемым canDestroy().

В любом случае вы можете сделать это либо с помощью немаршрутизированных вкладок, либо просто сохранить свои данные на более высоком компоненте, который не будет уничтожен.

2) Для детских маршрутов я просто поставлю 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' }
  ]
},

`