Angular: 仅显示组件并隐藏页眉和页脚

Question

如何只在页面上显示 Angular 组件，并隐藏 angular 组件中的其他所有内容，包括页眉和页脚？页眉和页脚自动放置在我们所有的组件中，我们甚至不在 html.

中为它们编写代码

Component Picture in Green Border

使用以下解决方案部分有效，但有时页眉和页脚仍会显示几秒钟，而真正的组件正在加载。

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

这是产品组件 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 放在上层并识别没有 header/footer 的页面。它不工作

Answer 2

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

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

Angular: 仅显示组件并隐藏页眉和页脚

Angular: Show Only the Component and Hide Header and Footer

typescript

angular

angular10