Ioni c Angular - рендеринг вложенного ион-маршрутизатора в виде страницы вместо подкомпонента

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>

Когда go I - /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 router logi c работает нормально.

Попробуйте добавить этот код в панель управления. 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>