子组件正在父组件下加载 - Angular

Question

我试图在单击按钮时在新页面中加载子组件，但它加载在父组件下方。

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: SideNavbarComponent
  },
  {
    path: 'application',
    component: ApplicationModuleComponent,
    children:[
      {
        path: 'sgldn',
        component : SgldnEntityComponent,
        children:[
          {
            path:'trademon',
            component:TradeMonitoringComponent
          },
          {
            path:'eod',
            component:EodMonitoringComponent
          }
        ]
      },
      {
        path:'sgparis',
        component : SgpmEntityComponent
      }
    ]
  }
];

side-navbar.component.html

<p>side-navbar works!</p>
<app-home></app-home>

home.component.html

<p>home works!</p>
<button routerLink="/application">APPLICATION</button>
<router-outlet></router-outlet>

application-module.component.html

<p>application-module works!</p>

请找到我的组件结构 -

我期待在新页面中加载子组件application.component.html。相反，当单击按钮时，它会加载到父组件下方。

Answer 1

我认为问题出在您的 app-module.html 和 home.component.html 中

router-outlet 组件就像一个“集线器”，它根据路由选择要显示的组件，因此您应该将它放在 app-module.html 中，这是您的角度应用程序的主要入口点。

在 router outlet 旁边，在 app-module.html 中，您应该包含可能始终可见的组件，例如无论哪个路由处于活动状态，导航栏始终位于页面顶部

在 home component.html 中，你应该只包含特定于你的主页的内容，并删除路由器出口组件