data - get current route angular 6

Angular2 Routing: pestañas de rutas persistentes y rutas secundarias

Question

Comunidad Angular!

Actualmente estoy reescribiendo la aplicación AngularJS en Angular 2. Quiero resolver un problema que podría describirse como: pestañas de ruta + rutas secundarias.

Entonces, básicamente, Router en Angular 2 destruye los componentes inactivos (¡mis pestañas!). El problema es que no quiero este comportamiento. La razón es que tengo algunos componentes como gráficos y cuadrícula de datos y quiero cambiar entre ellos rápidamente, no quiero recrearlos.

He encontrado algunas soluciones para persistir en mis pestañas mientras tengo rutas, pero utilizando este enfoque no sé cómo implementar rutas secundarias . También me gustaría tener una solución independiente de la profundidad (es decir, trabajar más a niveles más profundos) porque tengo más subpestañas que necesitan persistir.

La solución es: he puesto algún componente vacío en las rutas y he creado instancias de las pestañas, ocultándolas con la propiedad [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>

Answer 1

Entiendo que tiene dos preguntas diferentes:

1- Cómo evitar la destrucción del componente cuando lo dejas. 2- Implementar rutas infantiles.

1) Por ahora Angular no tiene una manera conveniente de hacer esto. Lo apreciaríamos si fueran un gancho del ciclo de vida llamado como canDestroy ().

De todos modos, puede hacerlo usando pestañas no enrutables O simplemente almacene sus datos en un componente superior que no se destruya.

2) Para las rutas infantiles solo pondré 2 ejemplos:

Ex1: enrutamiento infantil regular

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: Cuando el niño enruta pertenece a otro módulo.

Código para módulo superior

`

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

`

Código para rutas infantiles en su propio módulo.

`

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

`