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

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

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

Answer 2

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