相同的路线->加载不同的布局->某些组件

Question

我正在开发一个Angular 9应用程序，我想在其中加载2个不同的LayoutComponent

-VisitorLayoutComponent
-LoggedInLayoutComponent

然后这些组件将具有子路径和组件。

I want 
'localhost:4200' to load VisitorLayoutComponent when user is logged out and show some general landing page html

I want 
'localhost:4200' to load LoggedInLayoutComponent when user is logged in and show me user dashboard html in that route path

我目前正在我的路线上执行此操作，但是它不起作用，我尝试翻转添加它们的顺序，但没有任何效果。

const routes: Routes = [
  {
    path: '',
    component: LoggedInLayoutComponent,
    canActivate: [UserGuardService],
    children: [
      {
        path: '',
        component: DashboardComponent,
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    component: VisitorLayoutComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

UserGuardService返回硬编码的true或false（以检查两种布局）。

首先已注册其路线的布局，而第二条路线则无效。如果您颠倒顺序，则其他布局有效。