Как сделать вывод в середине экрана вместо нижней части экрана?

Question

У меня app.component. html следующим образом:

<div>
  <app-header [sidenav]="leftSidenav"></app-header>


  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav #leftSidenav mode="side" opened>
      <app-left-menu></app-left-menu>
    </mat-sidenav>
  <mat-sidenav-content>

    WElcome

  </mat-sidenav-content>
  </mat-sidenav-container>
  <router-outlet>

  </router-outlet>


</div>

Как вы можете, это моя начальная страница, и в меню sidenavigation определяется кнопка, которая отображает выход маршрутизатора. Проблема в том, что вывод отображается в нижней части экрана, а не в главном центре. В результате мне нужно прокрутить вниз, чтобы увидеть визуализированный компонент. Как это исправить, чтобы мне не нужно было прокручивать вниз.

Answer 1

Думайте о своем <router-outlet> как о любом стандартном элементе. Вы можете поместить его туда, куда хотите.

<header></header>
<router-outlet></router-outlet>
<footer></footer>

Ваша дополнительная проблема может заключаться в том, что вам нужна какая-то компоновка, чтобы визуализировать ваше тело рядом с сиденав.

Answer 2

Поместите <router-outlet> внутрь <mat-sidenav-content>

 <mat-sidenav-content>
    WElcome
      <router-outlet></router-outlet>
  </mat-sidenav-content>
  </mat-sidenav-container>

Кроме того, возможно, было бы лучше поместить "Welcome" в компоненте <app-header> (?)