如何获得Angular的 以使用CSS网格

Question

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

我创建了一个StackBlitz here。

正如您在app.component.css中看到的，我希望router-outlet（及其任何内容）占用grid-column: 2 / 5，截至目前，它占用了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>

我更新了your stackblitz进行演示。