如何让 Angular 的 <router-outlet> 与 CSS Grid 一起工作

Question

我正在尝试使用 Angular 7 和 CSS Grid 创建布局。我遇到的问题是router-outlet仅在第二行中占据一列。

我在这里创建了一个StackBlitz。

正如您在app.component.cssI want router-outlet(及其任何内容) to take up 中看到的grid-column: 2 / 5，截至目前，它占用了 2 / 3。

我正在努力实现的目标是可能的吗？

Answer 1

我认为问题在于您试图将样式直接应用于<router-outlet>. 相反，创建一个“主 div”元素并将路由器插座放在其中。

<app-header></app-header>
<app-navbar></app-navbar>
<div main>
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

我已经更新了你的 stackblitz来演示。

Answer 2

<router-outlet>没有大小也没有任何内容，实际的路由器内容是它的下一个元素。从中删除样式<router-outlet>并将其仅应用于下一个元素，您应该没问题。

此外，您app.component尝试将样式应用于组件中未包含的组件。您必须通过ViewEncapsulation.None在组件定义中使用来明确指定它。请参阅此处：https : //stackblitz.com/edit/angular-lmpnkl