Angular-具有全局子路由

Question

我正在Angular 7中构建一个具有不同主要路线的应用程序，例如

  {path: '', redirectTo: 'products', pathMatch: 'full' },
  {path: 'products', component: ProductsComponent, children: [
      {path: 'view/:productId', component: ProductComponent}
  ]},
  {path: 'recipes', component: RecipesComponent, children: [
      {path: 'view/:recipeId', component: RecipeComponent}
  ]},
  {path: 'user/:user', component: UserComponent, children: [
      {path: 'accountDetails', component: UserAccountComponent}
  ]},
  {path: '**', redirectTo: 'products'}

页面布局具有标题，并且主要内容覆盖页面的其余部分。

子路线启用后，它将从主要内容的右侧滑出。

我现在需要添加每个主要视图（产品，配方，用户）共有的子路线（我们称其为添加配方组件），这也将填充通常的子路线空间。我不希望有2个侧面板，所以不能同时激活2条子路线。

与其在每条主要路线上添加相同的路线，最好的方法是什么？

我的一部分感觉是我可以做一个快速修复，弄平布线并使用处理侧面板的辅助布线（子布线），但是我觉得必须有更好的方法。