Angular 6 and bootstrap 4 sidebar and navbar that does not reload on each link

Question

Angular 6 and bootstrap 4 sidebar and navbar that does not reload on each link

Navigation

#1 by (0 votes)

0

What is the correct way to create navbar and sidebar in angular, When I enter a link in my project, it loads the sidebar and the navbar and that does not seem to be correct. There are also pages in which I do not want to show the sidebar.

My routes are declared in the same way.

RouterModule.forRoot([
  {
    path:'',
    component:HomeComponent,
    canActivate:[AuthGuard],
    children: [
      { path: '',
        component: SidebarComponent
      },
      { path: '',
        outlet: 'navbar',
        component: NavbarComponent
      }

    ]
  },
  {
    path:'consulta',
    component:ConsultaComponent,
    canActivate:[AuthGuard],
    children: [
      { path: '',
        component: SidebarComponent
      },
      { path: '',
        outlet: 'navbar',
        component: NavbarComponent
      }
    ]
  },

  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "repdepto/:idDepto",
    component: RepdeptoComponent,
    canActivate:[AuthGuard],
  }
])

angular rutas

asked by Roberto Antezana 01.08.2018 в 23:25

source

1 answer

insert of two tables related to a problem with javascript file download

score 0 · Accepted Answer

What you have to do is create a route without a component. What in the documentation is known as Component-less route . That route without component must contain the sidebar and the navbar as children, but in the router-outlet s corresponding.

RouterModule.forRoot([
  // Primero las rutas en donde no se requieren SidebarComponent
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "repdepto/:idDepto",
    component: RepdeptoComponent,
    canActivate: [AuthGuard],
  },
  // Ahora la ruta vacía que contiene los componentes de navegación
  {
    path: '',   // Ruta sin componente
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        outlet: 'navbar',
        component: NavbarComponent
      },
      {
        path: '',
        outlet: 'sidebar',
        component: SidebarComponent
      },
      // Los componentes principales también son hijos de
      // la ruta sin componente
      {
        path: '',
        component: HomeComponent,
      },
      {
        path: 'consulta',
        component: ConsultaComponent,
      }
    ]
  },
])

The components that are not going to have sidebar or navbar must go first in the Router so that they do not fall into the route without a component.