如何获得Angular的 <router-outlet> 使用CSS Grid

Question

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

我在这里创建了StackBlitz 。

如您在app.component.css中看到的，我希望router-outlet （及其任何内容）占据grid-column: 2 / 5 app.component.css ，截至目前，它占据了2/3。

我要实现的目标有可能吗？

Answer 1

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

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

Answer 2

我认为问题在于您尝试将样式直接应用于<router-outlet> 。 而是创建一个“ main div”元素，并将路由器出口放入其中。

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

我已更新您的堆叠闪电战以进行演示。