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

问题描述

我正在尝试使用Angular 7和CSS Grid创建布局.我的问题是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 .

如您在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>中删除样式，仅将其应用于该元素的下一个元素，就可以了.

<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 Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！