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

【问题标题】：How to get Angular's <router-outlet> to work with CSS Grid如何让 Angular 的 <router-outlet> 与 CSS Grid 一起工作
【发布时间】：2019-07-19 00:29:00
【问题描述】：

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

我创建了一个StackBlitz here。

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

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

【问题讨论】：

您是否考虑过使用引导程序？引导网格将非常适合此
不，无论我使用 css 还是 scss，结果都是一样的。我不想使用 Bootstrap。
bootstrap 网格实际上是为处理列而设计的，它轻巧高效
这里，使用 Angular 7 和 CSS Grid，不要建议 OP 使用框架...如果你知道如何要按原样解决问题，请告诉 OP...
我猜 OP 的问题是他认为 router-outlet 有内容，相反，所有路由器驱动的模板都呈现在 router-outlet 旁边。这是 Angular 设计的，这是使用 CSS flex 和 grid 时应该考虑的。

标签： css angular angular7 css-grid

【解决方案1】：

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

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

我已经更新了your stackblitz 来演示。

【讨论】：

谢谢！非常简单和优雅的解决方案。我试图处理添加了在它旁边添加内容元素的路由器插座，这搞砸了我的网格。您的解决方案解决了我的网格问题，谢谢！
您使用 main 作为自定义属性而不是 <main> html-tag 的任何具体原因？

【解决方案2】：

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

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

【讨论】：