angular - 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

您可以从根级别删除您的headerandfooter并将它们仅包含在您需要显示它们的页面中。

或者您可以定义一个服务，您可以使用它来决定是否显示页眉和页脚。您可以ActivatedRoute或Router在服务内部跟踪当前页面路径。您可以*ngIf在具有页眉和页脚的组件中使用条件。

Answer 2

只需*ngIf为您的组件使用指令......或者将您的组件放在router-outlet上层并识别没有页眉/页脚的页面。它不工作