将CSS应用于路由组件

Question

我试图在我的应用程序中使用CSS GRID作为圣杯布局。使用角度路由器，我的页面的主要内容被动态加载并作为<router-outlet>之后的组件注入。

您可以找到我的应用程序here的示例。

为了获得正确的网格定义，我使用grid-area: <name>来指定组件及其位置。使用路由组件时，这是不可能的，因为我没有对动态组件的固定引用。在每个加载的组件的:host中应用CSS是一种解决方法，但不是可接受的解决方案。

有几个问题阻止我在路由组件（app.component.scss）的主机中将CSS应用于动态组件：

1. 路由组件没有固定引用（app-home vs app-about）
2. 主机组件和注入组件的注入上下文不同。

  <app-root _nghost-c0 ng-version="5.0.2">
    <app-header _ngcontent-c0 _nghost-c1>...</app-header>
    <app-navbar _ngcontent-c0 _nghost-c2>...</app-navbar>
    <router-outlet _ngcontent-c0></router-outlet>
    <app-home _nghost-c6>...</app-home>
    <app-footer _ngcontent-c0 _nghost-c3>...</app-footer>
  </app-root>

请注意主机的引用_ngcontent-c0未应用于路由组件app-home。

1. 通配符选择器被角度的视图封装
覆盖

  router-outlet + * {
    grid-area: content;
    background: greenyellow;
  }

变为

  router-outlet[_ngcontent-c0]    + *[_ngcontent-c0] {
    grid-area: content;
    background: greenyellow;
  }

缺少主机的上下文和通配符选择器的缩小对我来说都是错误的。任何人都可以帮我找到一种方法来使用动态角度组件正确实现CSS网格？请查看我的sample code以了解问题。

我已经在github上提交了两个与此问题相关的bug reports和feature请求。

Answer 1

尝试将您的路由出口封装到div中，并为此div分配网格区域。