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>