将 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. 通配符选择器被 Angular 的视图封装所否决

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

变成

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

主机上下文的缺乏和通配符选择器的缩小在我看来都是错误。谁能帮我找到一种方法来正确实现具有动态角度组件的 CSS 网格？请查看我的sample code 以了解问题。

我已经在github上提交了两个bugreports和一个feature与这个问题相关的请求。

Answer 1

尝试将你的 route-outlet 封装到一个 div 中，并将 grid-area 分配给这个 div。