离子角-嵌套的离子路由器出口渲染为页面而不是子组件

Question

我正在使用嵌套的离子路由器出口，以便将路由呈现为子组件，而不是占用整个页面。

这是我当前的路由配置：

// 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/submit时，提交组件将占据整个页面，覆盖仪表板标题。查看离子路由器出口和提交组件的样式，我看到以下内容 ：

.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: flex;
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
contain: layout size style;
overflow: hidden;
z-index: 0;
}

如何删除离子路由器出口的样式？它来自哪里？

Answer 1

正如您在此处看到的那样，您的提交页面正在作为子组件加载。

您必须进行布局。 Angular路由器逻辑工作正常。

尝试将以下代码添加到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>