Routing angolare nella stessa pagina

Aug 19 2020

Voglio utilizzare il routing angolare nella stessa pagina con tutti gli stessi componenti, sia che si tratti di /frontpage o /frontpage/param1/param2/param3. Ma sto solo aggiornando il componente dei miei figli con i parametri param1 param2 param3 ..

Ho un componente in prima pagina che ha un gruppo di componenti per bambini (e i loro figli).

Stavo costruendo in modo che non vi fosse alcuna modifica dell'URL ed era solo /frontpage, ma voglio aggiungere le mie query e i miei parametri nel mio URL che aggiorna i miei figli.

Ma non sto davvero capendo come farlo.

app.routing.ts

  {
    path: '',
    redirectTo: 'frontpage',
    pathMatch: 'full',
  },
  {
    path: '404',
    component: P404Component,
    data: {
      title: 'Page 404'
    }
  },
{
    path: '', // honestly I just realized this was here lol. I can probably take this out right? lol.. It was part of the base I am using.
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'frontpage',
        loadChildren: () => import(etcetc).then(m => m.FrontpageModule)
      },

frontpage-routing.module.ts

  {
    path: '',
    component: FrontpageComponent,
    data: {
      title: 'Frontpage'
    },
  },

Dove aggiungo /:param1/:param2/:param3 ??

Grazie!

Risposte

itspers Aug 19 2020 at 06:32

Non ci sono parametri opzionali nel routing: basta scrivere il secondo percorso. Se per qualche strana ragione hai bisogno di molti bambini lì, estrailo in una variabile e passa all'interno di ciascuno. I percorsi sono solo forniti di configurazione tramite token, non è un grosso problema.

  const toneOfChildren = [...];
  {
    path: '',
    component: FrontpageComponent,
    children: toneOfChildren  
  },
  {
    path: ':param1/:param2/:param3',
    component: FrontpageComponent,
    children: toneOfChildren  
  },

E FrontpageComponentbasta iscriversi a params e vedere se sono qui o no.