Блог

Главная - Вопросы по программированию - Угловой маршрутизатор -содержимое розетки, наложенное поверх mat-панели инструментов

Угловой маршрутизатор -содержимое розетки, наложенное поверх mat-панели инструментов

#html #angular

#HTML #угловой

Вопрос:

В моем app.component.html , Я разместил мат-панель инструментов над розеткой маршрутизатора следующим образом:

 <mat-toolbar color="primary">
  <span>Tattoo Share!</span>
</mat-toolbar>
<router-outlet></router-outlet>

Проблема в том, что содержимое router-outlet накладывается поверх панели инструментов. Это содержимое должно быть под панелью инструментов. Как я должен это исправить? Я пытался размещать вещи внутри блочных элементов, таких как div, но безрезультатно. На mat-toolbar также есть этот CSS:
mat-toolbar { position: fixed }

Комментарии:

1. Можете ли вы предоставить stackblitz вашей настройки? Посмотрите на это angular-ivy-bxvzxv.stackblitz.io/home У меня был тот же код, что и у вас.

Ответ №1:

Вы должны использовать CSS, styles.css чтобы поместить margin-bottom, равный высоте самой панели инструментов. Также используйте идентификатор, чтобы он не применялся к другим панелям инструментов

 mat-toolbar#over-router {
    margin-bottom: 40px; // check the actual height in the browser
}

Комментарии:

1. Это не работает. Содержимое Router-outlet по-прежнему находится поверх панели инструментов.

2. можете ли вы предоставить stackblitz или репозиторий с вашим кодом?

Ответ №2:

Вы можете использовать гибкую компоновку.

 <div class="home-main">
     <app-toolbar></app-toolbar>
     <div class="home-container">
         <router-outlet></router-outlet>
     </div>
</div>

.home-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

Ответ №3:

Заставил его работать, используя некоторый CSS на моей панели инструментов:

 mat-toolbar {
  position: fixed;
  top: 0;
  z-index: 1;
}