加载父级子级路由而不是子级组件

Question

正在尝试基于父子概念导航我的Angular应用程序。在加载时，父组件（而不是子组件）被加载，但URL似乎是

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'solutions', component: SolutionComponent,
    children: [
      { path: 'cog', component: CogComponent }
    ]
  },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

当我运行solutions/cog时，它会重定向到SolutionComponent，但它应该加载CogComponent

编辑：1

我使用时可以使用

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'solutions', component: SolutionComponent },
  { path: 'solutions/cog', component: CogComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

但是我希望它应该从上述方法加载。

请帮助解决此问题。

Answer 1

...
{
    path: 'solutions', component: SolutionComponent,
    children: [
        { path: 'cog', component: CogComponent }
    ]
},
...

由于您已经为路径component声明了solutions，因此它显示为SolutionComponent，并且它将在嵌套的CogComponent中呈现router-outlet

{ path: 'dashboard', component: DashboardComponent },
{
    path: 'solutions'
    children: [
        { path: 'cog', component: CogComponent },
        { path: '', component: SolutionComponent, pathMatch: 'full'}
    ]
},
...

以上路线应按预期工作。

Answer 2

您的第二方法有效，因为Angular将在父路由器出口本身中加载CogComponent模板。如果这是您想要的，那么最好采用这种方法。

但是如果您想将SolutionComponent作为CogComponent的父级，则必须在<router-outlet></router-outlet>上添加solution.component.html。

这里是方法：

...

<router-outlet></router-outlet>

[这将告诉Angular它需要在其中加载CogComponent，因为/cog是/solution路由的子路由。

---

这里是Working Sample StackBlitz供您参考。