如何获得 Angular 的 <router-outlet>使用 CSS 网格 [英] How to get Angular's <router-outlet> to work with CSS Grid

问题描述

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

I'm trying to create a layout with Angular 7 and CSS Grid. The problem I have is that the router-outlet only takes up one column in the second row.

我在此处创建了一个 StackBlitz .

I have created a StackBlitz here.

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

As you can see in app.component.css I want router-outlet (and any of its content) to take up grid-column: 2 / 5, as of now it takes up 2 / 3.

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

Is what I'm trying to achieve possible?

推荐答案

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

<router-outlet> has no size and does not have any content in it, the actual router content is the next element to it. Remove the styles from <router-outlet> and only apply it to the next element to that and you should be fine.

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

Also, your app.component tries to apply styles to components that are not included in your component. You have to specify this explicitly by using ViewEncapsulation.None in the component definition. See here: https://stackblitz.com/edit/angular-lmpnkl

这篇关于如何获得 Angular 的 <router-outlet>使用 CSS 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！