如何在 Angular 5 中重叠组件

Question

我刚开始使用 Angular，我正在创建一个示例站点。

所以基本上我有一个名为 <app-coverpage> 的封面组件，并且我有我想要添加的所有其他组件，我想与封面重叠，因为它应该像背景一样.

我已将组件添加到我的 app.component.html 文件中，当我按以下顺序添加它们时：

<app-header></app-header>
<app-coverpage></app-coverpage>

我看到的是这样的

我想要的是黑色 app-coverpage 组件成为其他所有组件的 'background'。

谁能帮我解决这个问题？

旁注。我注意到我无法将此组件添加到 index.html 文件中。这意味着当我按以下方式添加它时它不会在我的浏览器上呈现：

<app-root></app-root>
<app-coverpage></app-coverpage>

谁也能给我解释一下吗？

在此先感谢您对这两个问题的帮助！

Answer 1

<app-root></app-root> <app-coverpage></app-coverpage>

不，这在 index.html 中不起作用，因为 Index.html 文件只会遇到一个引导组件（仅限入门组件）。

要重叠，您可以在 <app-coverpage></app-coverpage> 组件的模板中添加 <app-header></app-header>，并根据您的要求使用 css 进行调整。

Answer 2

这样做 -

<app-coverpage>
    <app-header></app-header>
</app-coverpage>

How to Overlap Components in Angular 5