Angular 离子角度-嵌套离子路由器出口呈现为页面而不是子组件

我使用一个嵌套的ion路由器出口，以便将路由作为一个子组件呈现，而不是占据整个页面

这是我当前的路由配置：

// app-routing.module.ts
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterModule' },
  { 
    path: 'dashboard', 
    component: Dashboard,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      { path: 'submit', loadChildren: './submission/submission.module#SubmissionModule' }
    ]
  }
];

仪表板组件中的我的当前仪表板模板：

<!-- dashboard.html-->
<h2 id="dashboard-header">Dashboard</h2>
<ion-router-outlet></ion-router-outlet>

---

如何删除离子路由器插座的此样式？它来自哪里？

正如您在这里看到的，您的提交页面正在作为子组件加载

你必须在布局上下功夫。角度路由器逻辑工作正常

尝试将此代码添加到dashboard.html中，您就可以了解组件和子组件的工作原理：

<ion-row>
  <ion-col size="6">
    <ion-item>
      <ion-label>DASHBOAD COMPONENT</ion-label>
    </ion-item>
  </ion-col>
  <ion-col size="6">
    <ion-router-outlet></ion-router-outlet>
  </ion-col>
</ion-row>

仪表板组件

<ion-row>
  <ion-col size="6">
    <ion-item>
      <ion-label>DASHBOAD COMPONENT</ion-label>
    </ion-item>
  </ion-col>
  <ion-col size="6">
    <ion-router-outlet></ion-router-outlet>
  </ion-col>
</ion-row>