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; 
    } 

} 

&> *應該是針對通過路由器的出口產生的每一頁，但由於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; 
} 

這是以前工作的一些角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;  
}