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>

我的应用程序的每个页面都明显出现在 router-outlet 之后。

我的 CSS 是：

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

    & > * {
        flex: 1 0 auto;
    }

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

}

& > * 应该针对 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;
}

这是因为每个页面都是从 router-outlet 动态生成的，每次都会添加不同的前缀，并且样式表不会相应地更新。

事实上，检查我的页面根元素 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 版本之前可以工作，但在某些补丁之前它停止工作了。

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

这里没有出现这样的css：

这对我来说看起来像一个错误。这是正常工作的有效 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;    
}