Roteamento angular na mesma página

Aug 19 2020

Eu quero usar o roteamento angular na mesma página com todos os mesmos componentes, seja /frontpage ou /frontpage/param1/param2/param3. Mas apenas atualizando meu componente filho com os parâmetros param1 param2 param3 ..

Eu tenho um componente frontpage que tem vários componentes filhos (e seus filhos).

Eu estava construindo de uma forma que não havia alteração de URL e era apenas /frontpage, mas quero adicionar minhas consultas e parâmetros em meu URL que atualiza meus filhos.

Mas eu realmente não estou entendendo como fazer isso.

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

Onde eu adiciono o /:param1/:param2/:param3 ??

Obrigado!

Respostas

itspers Aug 19 2020 at 06:32

Não há parâmetros opcionais no roteamento - basta escrever a segunda rota. Se por algum motivo estranho você precisar de muitos filhos - extraia-os para alguma variável e passe dentro de cada um. As rotas são apenas configuradas via token, não é grande coisa.

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

E FrontpageComponentapenas assine os parâmetros e veja se eles estão aqui ou não.