css - 将 CSS 应用于路由组件

Question

我正在尝试在我的应用程序中使用 CSS GRID 作为 chalice 布局。使用 Angular 路由器，我的页面的主要内容被动态加载并作为<router-outlet>之后的组件注入(inject)。 .

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

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

有几个问题阻止我将路由组件 ( app.component.scss ) 的宿主中的 CSS 应用到动态组件:

1. 路由组件没有固定引用( app-home 与 app-about )
2. 宿主组件和注入(inject)组件的注入(inject)上下文不同。

  <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 .

通配符选择器被 Angular 的 View 封装所否决

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

变成了

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

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

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

Answer 1

尝试将您的路由导出封装到一个 div 中，并将网格区域分配给该 div。