Angular: показать только компонент и скрыть верхний и нижний колонтитулы

Question

Как мне показать только компонент Angular на странице и скрыть все остальное, включая верхний и нижний колонтитулы, от компонента angular? Верхний и нижний колонтитулы автоматически размещаются во всех наших компонентах, мы даже не кодируем их в html.

Изображение компонента в зеленой рамке

Использование следующего решения частично работает, однако иногда верхний и нижний колонтитулы все еще отображаются через несколько секунд, пока загружается реальный компонент.

:host{
  background: #4285f4;
  color:#fff;
  position: fixed;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

Как заставить компонент Angular занимать всю высоту экрана

Это HTML-код компонента продукта:

<div class="whole-container">
  <div class="product-data">
    <div>{{product?.productNumber}}</div>
    <div>{{product?.productName}}</div>
  </div>
  <div>
    Hello
  </div>
</div>

Answer 1

Просто используйте *ngIf директивы для ваших компонентов... или разместите свой router-outlet на верхний уровень и распознать страницу без верхнего / нижнего колонтитула.

Answer 2

Вы можете удалить свой header а также footer от корневого уровня и включайте их только на те страницы, где вам нужно их показать.

Или вы можете определить службу, которую вы можете использовать, чтобы решить, показывать ли вы верхний и нижний колонтитулы или нет. Ты мог бы тыActivatedRoute или Routerвнутри сервиса для отслеживания текущего пути к странице. И вы можете использовать*ngIf условие в вашем компоненте, имеющем верхний и нижний колонтитулы.