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

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

上述路线应该按您的预期工作。