同一页面中的角度路由

Question

我想在具有所有相同组件的同一页面中使用角度路由，无论是 /frontpage 还是 /frontpage/param1/param2/param3。但只是用 param1 param2 param3 参数更新我的子组件..

我有一个首页组件，它有一堆子（及其子）组件。

我正在以一种没有 URL 更改的方式构建，它只是 /frontpage，但我想将我的查询和参数添加到我的 url 中以更新我的孩子。

但我并不真正了解如何做到这一点。

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

在哪里添加 /:param1/:param2/:param3 ??

谢谢！

Answer 1

路由中没有可选参数 - 只需编写第二条路由。如果出于某种奇怪的原因你需要很多孩子 - 将其提取到某个变量并在每个变量中传递。路由只是通过令牌提供的配置，没什么大不了的。

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

在FrontpageComponent 中订阅参数，看看他们是否在这里。