Angular2 - 添加[_nghost-xxx-N]和[_ngcontent-xxx-N]会弄乱我的代码

Question

这是我的app.component.html

<header>
    <cm-main-navigation></cm-main-navigation>
</header>
<router-outlet></router-outlet>
<footer>
    <cm-footer></cm-footer>
</footer>

我的应用程序的每一页显然都出现在路由器插座之后。

我的css是：

:host {
    display: flex;
    height: 100%;
    flex-direction: column;

    & > * {
        flex: 1 0 auto;
    }

    header,
    router-outlet,
    footer {
        flex: 0 0 auto;
    }

}

＆安培; ＆GT; *应该针对router-outlet生成的每个页面，但由于ngcontent-xxx-N，它永远不会被应用：

[_nghost-ray-1] > *[_ngcontent-ray-1] {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

这是因为每个页面都是从路由器插座动态生成的，每次都会添加不同的前缀，并且样式表也不会相应更新。

实际上检查我的网页根元素时，css不会出现。在这里，我从其他元素中获取它，比如标题，它与它一起出现：

[_nghost-ray-1] footer[_ngcontent-ray-1], [_nghost-ray-1] header[_ngcontent-ray-1], [_nghost-ray-1] router-outlet[_ngcontent-ray-1] {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

这在一些Angular 2版本之前就已经开始了，但它之前停止了一些补丁。

所以我的问题是，如何定位可能动态变化的主机的任何子项？ 我不想改变影子设置。

这里没有出现这样的CSS：

这对我来说就像一个bug。这是通常有效的有效CSS，它是Angular 2打破它。

应该是这样的：

[_nghost-ray-1] > * {
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

Answer 1

您必须使用/deep/特殊选择器。

https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-

所以：

:host /deep/ > * {
    flex: 1 0 auto;    
}