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 并没有出现。在这里，我从其他元素中得到它，比如 header，它与：

一起出现

[_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 个版本之前是有效的，但它在一些补丁之前就停止工作了。

所以我的问题是，如何定位可能动态变化的主机的任何 children？我不想更改 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;    
}

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

Angular2 - adding [_nghost-xxx-N] and [_ngcontent-xxx-N] messes up my code

shadow-dom

angular