Angular：仅显示组件并隐藏页眉和页脚答案

【问题标题】：Angular: Show Only the Component and Hide Header and FooterAngular：仅显示组件并隐藏页眉和页脚
【发布时间】：2020-07-11 08:27:43
【问题描述】：

如何只在页面上显示 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;
}

How to get Angular component to take full height of screen

这是产品组件 html：

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

【问题讨论】：

粘贴您的组件代码，以便有人可以提出更好的建议
需要将代码粘贴到header和footer组件加载的地方

标签： angular typescript angular10

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我在什么条件下使用 NgIf？我只是在组件之上写？